From 82ef815e2038481c049fb36734c418b660c965fb Mon Sep 17 00:00:00 2001
From: Sirius DevOps <lance@siriusdevops.com>
Date: Sat, 29 Aug 2026 10:30:46 -0400
Subject: [PATCH] fix(ui): stop map chrome overlapping on phone

Retune the 820px layout so GIBS sits as a full-width bar under the
header, LAYERS starts collapsed top-left, zoom stays top-right, and
the DVR row clears the ticker. Hide attribution and map-hint on phone
so NASA/RainViewer text no longer paints through MKT/NEWS.
---
 app/static/index.html | 71 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/app/static/index.html b/app/static/index.html
index 65f004d..38d1849 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -608,7 +608,6 @@
             .tick-label { min-width: 56px; padding: 0 0.5rem; }
             .tick-tag { display: none; }
             .hud-chips { display: none; }
-            .map-hint { max-width: 80%; }
             .key-grid { grid-template-columns: minmax(0, 1fr); }
             .key-card { min-width: 0; overflow: hidden; }
             .key-form { flex-wrap: wrap; }
@@ -619,6 +618,63 @@
                 min-height: 44px;
             }
             .key-form .btn { min-height: 44px; min-width: 44px; }
+
+            /* Phone map chrome: one column, no shared pixels */
+            #view-map.view.active {
+                display: flex;
+                flex-direction: column;
+            }
+            .map-toolbar {
+                position: relative;
+                left: auto;
+                top: auto;
+                transform: none;
+                margin: 6px 8px 4px;
+                width: auto;
+                max-width: none;
+                flex: 0 0 auto;
+                align-self: stretch;
+                flex-wrap: wrap;
+            }
+            .map-toolbar select {
+                flex: 1 1 8rem;
+                min-width: 0;
+            }
+            .map-stage {
+                flex: 1 1 auto;
+                height: auto;
+                min-height: 0;
+            }
+            #layer-panel {
+                top: 8px;
+                left: 8px;
+                width: min(268px, calc(100% - 68px));
+                max-height: calc(100% - 16px - 52px);
+            }
+            /* Collapsed by default so Africa isn't buried under the stack */
+            #layer-panel .lp-body { display: none; }
+            #layer-panel.is-open .lp-body { display: flex; }
+            #layer-panel:not(.is-open) .lp-caret { transform: rotate(-90deg); }
+            .map-hint { display: none; }
+            #dvr-bar {
+                left: 8px;
+                right: 8px;
+                bottom: 8px;
+                transform: none;
+                min-width: 0;
+                max-width: calc(100% - 16px);
+                width: calc(100% - 16px);
+                flex-wrap: wrap;
+            }
+            #dvr-bar input[type=range] {
+                min-width: 0;
+                min-height: 32px;
+            }
+            .leaflet-control-attribution { display: none !important; }
+            .leaflet-top.leaflet-right .leaflet-control-zoom {
+                margin-top: 8px;
+                margin-right: 8px;
+            }
         }
         @media (prefers-reduced-motion: reduce) {
             .tick-track { animation: none; }
@@ -2228,8 +2284,15 @@ function quantizeBBox(bbox, decimals = 1) {
 }
 function toggleLayerPanel() {
     const panel = document.getElementById('layer-panel');
+    const head = panel.querySelector('.lp-head');
+    if (window.matchMedia('(max-width: 820px)').matches) {
+        panel.classList.toggle('is-open');
+        const open = panel.classList.contains('is-open');
+        head.setAttribute('aria-expanded', String(open));
+        return;
+    }
     panel.classList.toggle('collapsed');
-    panel.querySelector('.lp-head').setAttribute('aria-expanded', !panel.classList.contains('collapsed'));
+    head.setAttribute('aria-expanded', String(!panel.classList.contains('collapsed')));
 }
 
 /* ── Basemap visibility / opacity ── */
@@ -3130,6 +3193,10 @@ initNav();
 initSettings();
 initMarketTicker();
 checkHealth();
+if (window.matchMedia('(max-width: 820px)').matches) {
+    const lpHead = document.querySelector('#layer-panel .lp-head');
+    if (lpHead) lpHead.setAttribute('aria-expanded', 'false');
+}
 initMap();
 // Ticker lives on the map HUD — load after overlays start so it does not
 // contend with the first bbox burst. Payload is slim (no article bodies).