fix page layout when navigating between pages

assets/js/app.js

@@ -70,10 +70,34 @@ let ResponsiveSlideoverHook = {
   },
 };
 
+// Body Class Hook - Updates body class based on map_page assign
+let BodyClassHook = {
+  mounted() {
+    this.updateBodyClass();
+  },
+  
+  updated() {
+    this.updateBodyClass();
+  },
+  
+  updateBodyClass() {
+    // Get the map_page value from the element's data attribute
+    const mapPage = this.el.dataset.mapPage === 'true';
+    
+    // Update body class based on map_page value
+    if (mapPage) {
+      document.body.classList.add('map-page');
+    } else {
+      document.body.classList.remove('map-page');
+    }
+  }
+};
+
 // APRS Map Hook
 let Hooks = {};
 Hooks.APRSMap = MapAPRSMap;
 Hooks.ResponsiveSlideoverHook = ResponsiveSlideoverHook;
+Hooks.BodyClassHook = BodyClassHook;
 
 // Register weather chart hooks from TypeScript
 import { WeatherChartHooks } from "./features/weather_charts";

lib/aprsme_web/components/layouts/app.html.heex

@@ -1,29 +1,33 @@
 <% assigns = assign_new(assigns, :map_page, fn -> false end) %>
 <style>
-  /* Non-map pages should allow scrolling */
-  body:not(.map-page) {
-    overflow: auto;
-    height: auto;
-  }
-
-  body:not(.map-page) html {
-    overflow: auto;
-    height: auto;
-  }
-
-  body:not(.map-page) main {
-    overflow: visible;
-    height: auto;
-  }
-
-  body:not(.map-page) .phx-main {
-    overflow: visible;
-    height: auto;
+  /* Default scrolling behavior for all pages */
+  html, body {
+    overflow: auto !important;
+    height: auto !important;
+    min-height: 100vh !important;
   }
 
+  /* Reset constraints for non-map pages */
+  body:not(.map-page) main,
+  body:not(.map-page) .phx-main,
   body:not(.map-page) div[data-phx-main="true"] {
-    overflow: visible;
-    height: auto;
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    min-height: 100vh !important;
+  }
+
+  /* Ensure proper scrolling for non-map pages */
+  body:not(.map-page) {
+    overflow-y: auto !important;
+    height: auto !important;
+  }
+
+  /* Only apply map constraints to map pages */
+  body.map-page,
+  body.map-page html {
+    overflow: hidden !important;
+    height: 100vh !important;
   }
 
   /* Map page specific styles */
@@ -197,7 +201,12 @@
 </style>
 
 <.header dev_mode={Application.get_env(:aprsme, :dev_routes, false)} />
-<main class="min-h-screen bg-base-100">
+<main
+  id="main-content"
+  class={if assigns[:map_page], do: "min-h-screen bg-base-100", else: "bg-base-100"}
+  phx-hook="BodyClassHook"
+  data-map-page={to_string(assigns[:map_page] || false)}
+>
   <div>
     <.flash kind={:info} title="Success!" flash={@flash} />
     <.flash kind={:error} title="Error!" flash={@flash} />