From cab926b7faee871e289ef7fec6ad84d04ea40c80 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Thu, 19 Mar 2026 23:47:43 +0000
Subject: [PATCH] mobile: hide feed+legend, show LCD, fix rotation with
 visualViewport + forced height recalc

---
 public/index.html |  4 ++--
 public/live.css   | 13 +++++--------
 public/live.js    | 25 ++++++++++++++++++++-----
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/public/index.html b/public/index.html
index 97a2618..af7f11e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
   <link rel="stylesheet" href="style.css?v=1773963867">
   <link rel="stylesheet" href="home.css">
-  <link rel="stylesheet" href="live.css?v=1773963867">
+  <link rel="stylesheet" href="live.css?v=1773964063">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin="anonymous">
@@ -84,7 +84,7 @@
   <script src="nodes.js?v=1773961950" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="traces.js?v=1774079160" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="analytics.js?v=1773961035" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="live.js?v=1773963867" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="live.js?v=1773964063" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="observers.js?v=1774079160" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1773961276" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
diff --git a/public/live.css b/public/live.css
index 56d0ce8..08ddd52 100644
--- a/public/live.css
+++ b/public/live.css
@@ -254,12 +254,10 @@
 
 /* ---- Responsive ---- */
 @media (max-width: 640px) {
-  .live-feed { width: calc(100vw - 24px); max-height: 40vh; }
-  /* Legend: hidden by default on mobile, toggle button shows it */
+  .live-feed { display: none !important; }
+  .feed-show-btn { display: none !important; }
   .live-legend { display: none !important; }
-  .live-legend.legend-mobile-visible { display: flex !important; }
-  .legend-toggle-btn { display: block !important; }
-  /* Header: compact on mobile */
+  .legend-toggle-btn { display: none !important; }
   .live-header { 
     flex-wrap: wrap; gap: 6px; padding: 6px 10px;
     top: 56px; left: 8px; right: 8px; max-width: calc(100vw - 16px);
@@ -268,7 +266,6 @@
   .live-stat-pill { font-size: 11px; padding: 2px 7px; }
   .live-toggles { font-size: 10px; gap: 6px; margin-left: 0; }
   .live-title { font-size: 12px; letter-spacing: 1px; }
-  /* Feed detail card as bottom sheet on mobile (#61) */
   .feed-detail-card {
     position: fixed !important;
     right: 0 !important;
@@ -622,11 +619,11 @@
 
 /* Mobile VCR */
 @media (max-width: 640px) {
-  .vcr-bar { padding: 4px 6px; overflow: hidden; flex-wrap: nowrap; }
+  .vcr-bar { padding: 4px 6px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; }
   .vcr-btn { padding: 6px 8px; font-size: 0.8rem; min-height: 44px; min-width: 44px; }
   .vcr-scope-btns { gap: 1px; }
   .vcr-scope-btn { font-size: 0.65rem; padding: 4px 6px; min-height: 36px; }
-  .vcr-lcd { display: none; }
+  .vcr-lcd { display: flex; }
   .vcr-mode { font-size: 0.65rem; padding: 2px 6px; }
   .vcr-timeline-container { min-width: 60px; }
   .vcr-prompt { font-size: 0.7rem; }
diff --git a/public/live.js b/public/live.js
index c37f780..5e3d111 100644
--- a/public/live.js
+++ b/public/live.js
@@ -64,14 +64,25 @@
     let resizeTimer = null;
     _onResize = function() {
       clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(() => { if (map) map.invalidateSize({ animate: false }); }, 150);
+      resizeTimer = setTimeout(() => {
+        if (map) {
+          // Force container size recalc
+          const page = document.querySelector('.live-page');
+          if (page) { page.style.height = window.innerHeight + 'px'; }
+          map.invalidateSize({ animate: false });
+        }
+      }, 150);
     };
     window.addEventListener('resize', _onResize);
     window.addEventListener('orientationchange', () => {
-      setTimeout(_onResize, 200);
-      setTimeout(_onResize, 600);
-      setTimeout(_onResize, 1200);
+      setTimeout(_onResize, 100);
+      setTimeout(_onResize, 400);
+      setTimeout(_onResize, 800);
+      setTimeout(_onResize, 1500);
     });
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', _onResize);
+    }
   }
 
   // === VCR Controls ===
@@ -1442,7 +1453,11 @@
     if (_rateCounterInterval) { clearInterval(_rateCounterInterval); _rateCounterInterval = null; }
     if (ws) { ws.onclose = null; ws.close(); ws = null; }
     if (map) { map.remove(); map = null; }
-    if (_onResize) { window.removeEventListener('resize', _onResize); window.removeEventListener('orientationchange', _onResize); }
+    if (_onResize) {
+      window.removeEventListener('resize', _onResize);
+      window.removeEventListener('orientationchange', _onResize);
+      if (window.visualViewport) window.visualViewport.removeEventListener('resize', _onResize);
+    }
     const topNav = document.querySelector('.top-nav');
     if (topNav) { topNav.classList.remove('nav-autohide'); topNav.style.position = ''; topNav.style.width = ''; topNav.style.zIndex = ''; }
     if (_navCleanup) {