From 75bf3bce51f0cedf55df644f0293b414ca76af63 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Thu, 19 Mar 2026 23:54:18 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20rotation=20=E2=80=94=20JS-driven=20heigh?=
 =?UTF-8?q?t=20(window.innerHeight)=20on=20live-page+app,=20runs=20immedia?=
 =?UTF-8?q?tely=20+=20on=20every=20resize/orientation/visualViewport=20cha?=
 =?UTF-8?q?nge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |  2 +-
 public/live.js    | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index 91c8e1d..2b73e4e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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=1773964063" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="live.js?v=1773964458" 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.js b/public/live.js
index 5e3d111..a5112c5 100644
--- a/public/live.js
+++ b/public/live.js
@@ -65,20 +65,23 @@
     _onResize = function() {
       clearTimeout(resizeTimer);
       resizeTimer = setTimeout(() => {
+        // Set live-page height from JS — most reliable across all mobile browsers
+        const page = document.querySelector('.live-page');
+        const appEl = document.getElementById('app');
+        const h = window.innerHeight;
+        if (page) page.style.height = h + 'px';
+        if (appEl) appEl.style.height = h + 'px';
         if (map) {
-          // Force container size recalc
-          const page = document.querySelector('.live-page');
-          if (page) { page.style.height = window.innerHeight + 'px'; }
-          map.invalidateSize({ animate: false });
+          map.invalidateSize({ animate: false, pan: false });
         }
-      }, 150);
+      }, 50);
     };
+    // Run immediately to set correct initial height
+    _onResize();
     window.addEventListener('resize', _onResize);
     window.addEventListener('orientationchange', () => {
-      setTimeout(_onResize, 100);
-      setTimeout(_onResize, 400);
-      setTimeout(_onResize, 800);
-      setTimeout(_onResize, 1500);
+      // Orientation change is async — viewport dimensions settle late
+      [50, 200, 500, 1000, 2000].forEach(ms => setTimeout(_onResize, ms));
     });
     if (window.visualViewport) {
       window.visualViewport.addEventListener('resize', _onResize);
@@ -1458,6 +1461,9 @@
       window.removeEventListener('orientationchange', _onResize);
       if (window.visualViewport) window.visualViewport.removeEventListener('resize', _onResize);
     }
+    // Restore #app height to CSS default
+    const appEl = document.getElementById('app');
+    if (appEl) appEl.style.height = '';
     const topNav = document.querySelector('.top-nav');
     if (topNav) { topNav.classList.remove('nav-autohide'); topNav.style.position = ''; topNav.style.width = ''; topNav.style.zIndex = ''; }
     if (_navCleanup) {