style: search-pane to have lower z-index than stop modal

OneBusAway · Sep 2, 2024 · 9d9f151 · 9d9f151
1 parent 2f90702
commit 9d9f151
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/navigation/ModalPane.svelte b/src/components/navigation/ModalPane.svelte
@@ -6,6 +6,8 @@
 	import { createEventDispatcher } from 'svelte';
 	import { pushState } from '$app/navigation';
 
+	export let stop = null;
+
 	const dispatch = createEventDispatcher();
 
 	function closePane() {
@@ -16,6 +18,7 @@
 
 <div
 	class="modal-pane scroll-hidden"
+	style={stop ? 'z-index: 40' : 'z-index: 20'}
 	in:fly={{ y: 200, duration: 500 }}
 	out:fly={{ y: 200, duration: 500 }}
 >
@@ -36,7 +39,7 @@
 
 <style lang="postcss">
 	.modal-pane {
-		@apply absolute bottom-0 left-0 z-40 max-h-[40rem] w-full overflow-y-scroll bg-transparent px-2 shadow-lg md:max-w-prose;
+		@apply absolute bottom-0 left-0 max-h-[40rem] w-full overflow-y-scroll bg-transparent px-2 shadow-lg md:max-w-prose;
 		@apply rounded-lg border-b-[1px] border-[#C6C6C8] bg-[#F3F2F8] dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15 dark:bg-black;
 	}
 

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -69,7 +69,7 @@
 <Header on:searchResults={handleSearch} />
 
 {#if stop}
-	<ModalPane on:close={closePane}>
+	<ModalPane on:close={closePane} {stop}>
 		<StopPane
 			{showAllStops}
 			{stop}