fix: max-width and scrollbars on the map

WelcometoMyGarden · Nov 3, 2023 · 021d522 · 021d522
1 parent f6586c8
commit 021d522
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/lib/components/MinimalFooter.svelte b/src/lib/components/MinimalFooter.svelte
@@ -25,10 +25,15 @@
 
 <style>
   /* Use CSS specificity to override the height */
-  :global(div.app.active-explore:not(.fullscreen)) {
+  :global(div.app.active-explore) {
     --height-footer: 4.5rem;
   }
 
+  /* Hide the footer on a fullscreen desktop map, too */
+  :global(div.app.active-explore.fullscreen footer) {
+    display: none;
+  }
+
   footer {
     height: var(--height-footer);
     width: 100%;

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -256,7 +256,7 @@
     height: calc(var(--vh, 1vh) * 100);
     height: 100dvh;
     /* The home page for example overflows */
-    overflow: scroll;
+    overflow-y: scroll;
 
     /* Allows the <footer> to expand to the bottom when the screen is taller than the <main> content */
     /* Note:
@@ -284,9 +284,15 @@
      */
   }
 
+  .app.active-explore {
+    /* Avoid scrollbars */
+    overflow-y: auto;
+  }
   .app.active-explore > main {
     /* Make sure the map fills the entire space */
     height: 100%;
+    /* No max-width on the explore page */
+    max-width: unset;
   }
   /*
     If the chat page is active, make sure it expands to the full available height.