From 582040005282ec013e90578353f96b6a9ed48694 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 8 Jul 2025 15:30:04 -0500
Subject: [PATCH] fix page layout when navigating between pages

---
 assets/js/app.js                              | 24 +++++++++
 .../components/layouts/app.html.heex          | 53 +++++++++++--------
 2 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 76b7419..6149116 100644
--- a/assets/js/app.js
+++ b/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";
diff --git a/lib/aprsme_web/components/layouts/app.html.heex b/lib/aprsme_web/components/layouts/app.html.heex
index 33312fe..85224c8 100644
--- a/lib/aprsme_web/components/layouts/app.html.heex
+++ b/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} />