Merge pull request #47 from OneBusAway/modalpane-style

Fix: ModalPane never underlap the top of the window or navbar
OneBusAway · Sep 6, 2024 · f3a5b19 · f3a5b19
2 parents 4b85dd3 + dbd9328
commit f3a5b19
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/components/navigation/ModalPane.svelte b/src/components/navigation/ModalPane.svelte
@@ -34,15 +34,21 @@
 		</button>
 	</div>
 
-	<slot></slot>
+	<div class="modal-content">
+		<slot></slot>
+	</div>
 </div>
 
 <style lang="postcss">
 	.modal-pane {
-		@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 absolute bottom-0 left-0 max-h-[40rem] w-[25em] overflow-y-scroll bg-transparent px-2 shadow-lg md:w-full md:max-w-prose lg:w-full;
 		@apply rounded-lg border-b-[1px] border-[#C6C6C8] bg-[#F3F2F8] dark:border-[1px] dark:border-[#C6C6C8] dark:border-opacity-15 dark:bg-black;
 	}
 
+	.modal-content {
+		max-height: calc(100vh - 6.6em);
+	}
+
 	.close-button {
 		@apply rounded px-4 py-2;
 		@apply transition duration-300 ease-in-out hover:bg-neutral-200 dark:hover:bg-neutral-200/50;

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,10 +7,10 @@
 </script>
 
 <div class="relative h-dvh w-full">
-	<div class="absolute w-full">
+	<div class="fixed w-full">
 		<Header />
 	</div>
-	<div>
+	<div class="h-[100vh] overflow-hidden">
 		<slot></slot>
 	</div>
 </div>