From 1786bc8985f6f7822a99e03f1ee23df47d78f206 Mon Sep 17 00:00:00 2001
From: Nate <nate@necloud.us>
Date: Mon, 16 Mar 2026 14:38:36 -0400
Subject: [PATCH] Fix persistent bottom nav by moving tabs outside sticky
 header

---
 app/public/index.html | 45 ++++++++++++++++++++++---------------------
 app/public/style.css  | 11 +++++++++++
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/app/public/index.html b/app/public/index.html
index 49570df..33c49e2 100644
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -22,28 +22,6 @@
 
   <header class="masthead">
     <h1>Weather</h1>
-    <nav class="tabs">
-      <button class="tab active" data-tab="conditions" aria-label="Conditions">
-        <span class="tab-icon" aria-hidden="true">🌤</span>
-        <span class="tab-text">Now</span>
-      </button>
-      <button class="tab" data-tab="radar-full" aria-label="Radar">
-        <span class="tab-icon" aria-hidden="true">🛰</span>
-        <span class="tab-text">Radar</span>
-      </button>
-      <button class="tab" data-tab="maps" aria-label="Maps">
-        <span class="tab-icon" aria-hidden="true">🗺</span>
-        <span class="tab-text">Maps</span>
-      </button>
-      <button class="tab" data-tab="alerts" aria-label="Alerts">
-        <span class="tab-icon" aria-hidden="true">⚠️</span>
-        <span class="tab-text">Alerts</span>
-      </button>
-      <button class="tab" data-tab="settings" aria-label="Settings">
-        <span class="tab-icon" aria-hidden="true">⚙️</span>
-        <span class="tab-text">Settings</span>
-      </button>
-    </nav>
     <span class="tagline">Open-Meteo · RainViewer</span>
   </header>
 
@@ -290,6 +268,29 @@
     </div>
   </div>
 
+  <nav class="tabs" aria-label="Primary navigation">
+    <button class="tab active" data-tab="conditions" aria-label="Conditions">
+      <span class="tab-icon" aria-hidden="true">🌤</span>
+      <span class="tab-text">Now</span>
+    </button>
+    <button class="tab" data-tab="radar-full" aria-label="Radar">
+      <span class="tab-icon" aria-hidden="true">🛰</span>
+      <span class="tab-text">Radar</span>
+    </button>
+    <button class="tab" data-tab="maps" aria-label="Maps">
+      <span class="tab-icon" aria-hidden="true">🗺</span>
+      <span class="tab-text">Maps</span>
+    </button>
+    <button class="tab" data-tab="alerts" aria-label="Alerts">
+      <span class="tab-icon" aria-hidden="true">⚠️</span>
+      <span class="tab-text">Alerts</span>
+    </button>
+    <button class="tab" data-tab="settings" aria-label="Settings">
+      <span class="tab-icon" aria-hidden="true">⚙️</span>
+      <span class="tab-text">Settings</span>
+    </button>
+  </nav>
+
 </div><!-- .app -->
 
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
diff --git a/app/public/style.css b/app/public/style.css
index 19fab1c..9733e8f 100644
--- a/app/public/style.css
+++ b/app/public/style.css
@@ -105,6 +105,8 @@ a:hover { text-decoration: underline; }
   left: 0;
   right: 0;
   bottom: 0;
+  width: 100vw;
+  max-width: 100vw;
   z-index: 300;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -115,6 +117,13 @@ a:hover { text-decoration: underline; }
   border-top: 1px solid rgba(121, 165, 191, 0.36);
 }
 
+@supports (bottom: env(safe-area-inset-bottom)) {
+  .tabs {
+    bottom: 0;
+    padding-bottom: calc(0.45rem + env(safe-area-inset-bottom));
+  }
+}
+
 .tab {
   border: none;
   border-radius: 12px;
@@ -791,6 +800,8 @@ body.high-contrast {
     left: 0;
     right: 0;
     bottom: 0;
+    width: 100vw;
+    max-width: 100vw;
     z-index: 300;
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));