diff --git a/public/app.js b/public/app.js
index 9272955d..6323e47e 100644
--- a/public/app.js
+++ b/public/app.js
@@ -463,6 +463,9 @@ function navigate() {
   currentPage = basePage;
 
   const app = document.getElementById('app');
+  // Pages with fixed-height containers (maps, virtual-scroll, split-panels)
+  const fixedPages = { packets: 1, nodes: 1, map: 1, live: 1, channels: 1, 'audio-lab': 1 };
+  app.classList.toggle('app-fixed', basePage in fixedPages);
   if (pages[basePage]?.init) {
     const t0 = performance.now();
     pages[basePage].init(app, routeParam);
diff --git a/public/compare.js b/public/compare.js
index ca263eb6..75dab998 100644
--- a/public/compare.js
+++ b/public/compare.js
@@ -48,7 +48,7 @@ if (typeof window !== 'undefined') window.comparePacketSets = comparePacketSets;
     packetsB = [];
     currentView = 'summary';
 
-    app.innerHTML = '<div class="compare-page" style="overflow-y:auto;height:calc(100vh - 56px);padding:16px">' +
+    app.innerHTML = '<div class="compare-page" style="padding:16px">' +
       '<div class="page-header" style="display:flex;align-items:center;gap:12px;margin-bottom:16px">' +
         '<a href="#/observers" class="btn-icon" title="Back to Observers" aria-label="Back">\u2190</a>' +
         '<h2 style="margin:0">\uD83D\uDD0D Observer Comparison</h2>' +
diff --git a/public/home.css b/public/home.css
index 28d14027..be9eb3a4 100644
--- a/public/home.css
+++ b/public/home.css
@@ -1,7 +1,6 @@
 /* === CoreScope — home.css === */
 
-/* Override #app overflow:hidden for home page scrolling */
-#app:has(.home-hero), #app:has(.home-chooser) { overflow-y: auto; }
+/* Home page now uses body scroll (no #app override needed — see style.css) */
 
 /* Chooser */
 .home-chooser {
diff --git a/public/node-analytics.js b/public/node-analytics.js
index 85ddb80f..52eefd3c 100644
--- a/public/node-analytics.js
+++ b/public/node-analytics.js
@@ -51,7 +51,7 @@
     const nodeName = escapeHtml(n.name || n.public_key.slice(0, 12));
 
     container.innerHTML = `
-      <div style="max-width:1000px;margin:0 auto;padding:12px 16px;height:100%;overflow-y:auto">
+      <div style="max-width:1000px;margin:0 auto;padding:12px 16px">
         <div style="margin-bottom:12px">
           <a href="#/nodes/${encodeURIComponent(n.public_key)}" style="color:var(--accent);text-decoration:none;font-size:12px">← Back to ${nodeName}</a>
           <h2 style="margin:4px 0 2px;font-size:18px">📊 ${nodeName} — Analytics</h2>
diff --git a/public/observer-detail.js b/public/observer-detail.js
index 80624e52..fb2fc4a1 100644
--- a/public/observer-detail.js
+++ b/public/observer-detail.js
@@ -37,7 +37,7 @@
     }
 
     app.innerHTML = `
-      <div class="observer-detail-page" style="overflow-y:auto;height:calc(100vh - 56px);padding:16px">
+      <div class="observer-detail-page" style="padding:16px">
         <div class="page-header" style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
           <a href="#/observers" class="btn-icon" title="Back to Observers" aria-label="Back">←</a>
           <h2 style="margin:0" id="obsTitle">Observer Detail</h2>
diff --git a/public/perf.js b/public/perf.js
index 596a4688..4a6fde69 100644
--- a/public/perf.js
+++ b/public/perf.js
@@ -5,7 +5,7 @@
   let interval = null;
 
   async function render(app) {
-    app.innerHTML = '<div id="perfWrapper" style="height:100%;overflow-y:auto;padding:16px 24px;"><h2>⚡ Performance Dashboard</h2><div id="perfContent">Loading...</div></div>';
+    app.innerHTML = '<div id="perfWrapper" style="padding:16px 24px;"><h2>⚡ Performance Dashboard</h2><div id="perfContent">Loading...</div></div>';
     await refresh();
   }
 
diff --git a/public/style.css b/public/style.css
index 93e8362a..d66752cf 100644
--- a/public/style.css
+++ b/public/style.css
@@ -181,7 +181,12 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
 }
 
 /* === Layout === */
-#app { height: calc(100vh - 52px); height: calc(100dvh - 52px); overflow: hidden; }
+/* Default: body-scroll mode — content pushes beyond viewport, iOS status-bar
+   tap-to-scroll works because <body> is the scroll container.  Pages that need
+   a fixed-height container (maps, virtual-scroll, split-panels) add
+   .app-fixed via the router so their children can use height:100%. */
+#app { min-height: calc(100vh - 52px); min-height: calc(100dvh - 52px); }
+#app.app-fixed { height: calc(100vh - 52px); height: calc(100dvh - 52px); min-height: 0; overflow: hidden; }
 
 .split-layout {
   display: flex; height: 100%; overflow: hidden;
@@ -674,7 +679,7 @@ button.ch-item.selected { background: var(--selected-bg); }
 .advert-info { font-size: 12px; line-height: 1.5; }
 
 /* === Traces Page === */
-.traces-page { padding: 16px; max-width: var(--trace-max-width, 95vw); margin: 0 auto; overflow-y: auto; height: 100%; }
+.traces-page { padding: 16px; max-width: var(--trace-max-width, 95vw); margin: 0 auto; }
 .trace-search {
   display: flex; gap: 8px; margin-bottom: 20px;
 }
@@ -746,7 +751,7 @@ button.ch-item.selected { background: var(--selected-bg); }
 ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
 
 /* === Observers Page === */
-.observers-page { padding: 20px; max-width: 1200px; margin: 0 auto; overflow-y: auto; height: calc(100vh - 56px); }
+.observers-page { padding: 20px; max-width: 1200px; margin: 0 auto; }
 .obs-summary { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
 .obs-stat { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); }
 .health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@@ -1138,7 +1143,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
 .node-activity-time { color: var(--text-muted); white-space: nowrap; min-width: 70px; font-size: 12px; }
 
 /* Analytics page */
-.analytics-page { padding: 16px 24px; max-width: 1600px; margin: 0 auto; overflow-y: auto; height: 100%; }
+.analytics-page { padding: 16px 24px; max-width: 1600px; margin: 0 auto; }
 .analytics-header { margin-bottom: 20px; }
 .analytics-header h2 { margin: 0 0 4px; }
 .analytics-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }