fix modal positioning, swaps arrow with close icon

src/lib/components/Modal.svelte

@@ -56,9 +56,8 @@
 		top: 0;
 		left: 100vw;
 		background-color: var(--background);
-		height: 100vh;
-		height: -webkit-fill-available;
-		width: calc(100vw - 2rem);
+		height: 0;
+		width: 0px;
 		transition: left 400ms ease;
 		padding: 0 1rem;
 		overflow-y: scroll;
@@ -66,6 +65,9 @@
 		&.open {
 			position: fixed;
 			left: 0;
+			height: 100vh;
+			height: -webkit-fill-available;
+			width: calc(100vw - 2rem);
 		}
 	}
 </style>

src/lib/components/modals/ModalHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { resetModal } from '$lib/store';
-	import ArrowLeft from '$lib/icons/ArrowLeft.svelte';
+	import Close from '$lib/icons/Close.svelte';
 
 	export let title: string;
 	export let subtitle: string;
@@ -40,7 +40,7 @@
 
 <div class="top">
 	<button class="back" on:click={resetModal} aria-label="Close">
-		<ArrowLeft fill="var(--color)" />
+		<Close />
 	</button>
 	<span id="header-title" bind:this={headerTitleEl}>{title}</span>
 </div>

src/lib/icons/ArrowLeft.svelte

@@ -2,23 +2,6 @@
 	export let fill = 'var(--color)';
 </script>
 
-<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768">
-<path fill="var(--color)" d="M768 352h-658.7l177.4-177.4-45.3-45.3-232 232c-12.5 12.5-12.5 32.8 0 45.3l232 232 45.3-45.3-177.4-177.3h658.7v-64z"></path>
-</svg> -->
-
-<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 21.0547 17.9199">
- <g>
-  <path d="M0 8.95508C0 9.27734 0.126953 9.64844 0.498047 10L8.20312 17.2754C8.67188 17.7148 9.0625 17.9102 9.54102 17.9102C10.2051 17.9102 10.6836 17.4219 10.6836 16.7676L10.6836 13.0371L18.6133 13.0371C20.1562 13.0371 21.0547 12.1582 21.0547 10.6445L21.0547 7.27539C21.0547 5.76172 20.1562 4.88281 18.6133 4.88281L10.6836 4.88281L10.6836 1.19141C10.6836 0.537109 10.2051 0 9.52148 0C9.04297 0 8.7207 0.205078 8.20312 0.693359L0.498047 7.90039C0.117188 8.26172 0 8.62305 0 8.95508ZM1.74805 8.95508C1.74805 8.89648 1.77734 8.83789 1.85547 8.76953L8.80859 2.09961C8.85742 2.06055 8.91602 2.02148 8.97461 2.02148C9.0625 2.02148 9.11133 2.08008 9.11133 2.1582L9.11133 6.03516C9.11133 6.25977 9.21875 6.35742 9.44336 6.35742L18.5938 6.35742C19.2188 6.35742 19.5801 6.71875 19.5801 7.35352L19.5801 10.5664C19.5801 11.2012 19.2188 11.5625 18.5938 11.5625L9.44336 11.5625C9.21875 11.5625 9.11133 11.6602 9.11133 11.8848L9.11133 15.6641C9.11133 15.752 9.0625 15.8105 8.98438 15.8105C8.92578 15.8105 8.86719 15.7812 8.81836 15.7227L1.85547 9.14062C1.77734 9.0625 1.74805 9.01367 1.74805 8.95508Z"/>
- </g>
-</svg> -->
-
-<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 21.0547 17.9199">
-
- <g>
-  <path d="M0 8.95508C0 9.27734 0.126953 9.64844 0.498047 10L8.20312 17.2754C8.67188 17.7148 9.0625 17.9102 9.54102 17.9102C10.2051 17.9102 10.6836 17.4219 10.6836 16.7676L10.6836 12.8125L18.8086 12.8125C20.2246 12.8125 21.0547 12.0117 21.0547 10.6152L21.0547 7.30469C21.0547 5.9082 20.2246 5.10742 18.8086 5.10742L10.6836 5.10742L10.6836 1.19141C10.6836 0.537109 10.2051 0 9.52148 0C9.04297 0 8.7207 0.205078 8.20312 0.693359L0.498047 7.90039C0.117188 8.26172 0 8.62305 0 8.95508Z"fill-opacity="0.85"/>
- </g>
-</svg>
- -->
 <svg
 	version="1.1"
 	xmlns="http://www.w3.org/2000/svg"

src/lib/icons/Close.svelte

@@ -0,0 +1,18 @@
+<svg
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="0 0 768 768"
+>
+	<g id="icomoon-ignore" />
+	<path
+		d="M670.6 142.6l-45.2-45.2-241.4 241.3-241.4-241.3-45.2 45.2 241.3 241.4-241.3 241.4 45.2 45.2 241.4-241.3 241.4 241.3 45.2-45.2-241.3-241.4z"
+	/>
+</svg>
+
+<style>
+	svg {
+		fill: var(--color);
+	}
+</style>