From 10f712f9d7bff63b3ef80f6754d326caa6942a79 Mon Sep 17 00:00:00 2001 From: Kpa-clawbot Date: Fri, 3 Apr 2026 16:54:36 -0700 Subject: [PATCH] fix: restructure scroll containers for iOS status bar tap-to-scroll (#330) (#554) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Fixes #330 — iOS status bar tap-to-scroll broken because `#app` had `overflow: hidden`, preventing `` from being the scroll container. ## Approach: Option B from the issue Instead of a JS polyfill, this restructures scroll containers so `` is the primary scroll container by default, which iOS Safari requires for native status-bar tap-to-scroll. ### How it works **`#app` default (body-scroll mode):** Uses `min-height` instead of fixed `height`, no `overflow: hidden`. Content pushes beyond the viewport and body scrolls naturally. **`#app.app-fixed` (fixed-layout mode):** Restores the original `height: calc(100dvh - 52px); overflow: hidden` for pages that need constrained containers. The router in `app.js` toggles this class based on the current page. ### Fixed-layout pages (`.app-fixed`) These pages need fixed-height containers and are unchanged in behavior: - **packets** — virtual scroll requires fixed-height `.panel-left` to calculate visible rows - **nodes** — split-panel layout with independently scrollable panels - **map** — Leaflet requires fixed-dimension container - **live** — Leaflet map (also has its own `#app:has(.live-page)` override in live.css) - **channels** — split-panel chat layout - **audio-lab** — split-panel layout ### Body-scroll pages (no `.app-fixed`) These pages now let the body scroll, enabling iOS tap-to-scroll: - **analytics** — removed `overflow-y: auto; height: 100%` - **observers** — removed `overflow-y: auto; height: calc(100vh - 56px)` - **traces** — removed `overflow-y: auto; height: 100%` - **home** — removed `#app:has(.home-hero)` override (no longer needed) - **compare** — removed inline `overflow-y:auto; height:calc(100vh - 56px)` - **perf** — removed inline `height:100%; overflow-y:auto` - **observer-detail** — removed inline `overflow-y:auto; height:calc(100vh - 56px)` - **node-analytics** — removed inline `height:100%; overflow-y:auto` ### Files changed | File | Change | |------|--------| | `public/style.css` | `#app` default → `min-height`; added `.app-fixed` class | | `public/app.js` | Router toggles `.app-fixed` based on page | | `public/home.css` | Removed `#app:has()` workaround | | `public/compare.js` | Removed inline overflow/height | | `public/perf.js` | Removed inline overflow/height | | `public/observer-detail.js` | Removed inline overflow/height | | `public/node-analytics.js` | Removed inline overflow/height | ### What's preserved - Sticky nav (`position: sticky; top: 0`) — works with body scroll - Split-panel resize handles — unchanged, still in fixed containers - Virtual scroll on packets page — unchanged, `.panel-left` still has fixed height - Leaflet maps — unchanged, containers still have fixed dimensions - Mobile responsive overrides — unchanged Co-authored-by: you --- public/app.js | 3 +++ public/compare.js | 2 +- public/home.css | 3 +-- public/node-analytics.js | 2 +- public/observer-detail.js | 2 +- public/perf.js | 2 +- public/style.css | 13 +++++++++---- 7 files changed, 17 insertions(+), 10 deletions(-) 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 = '
' + + app.innerHTML = '
' + '
' + '\u2190' + '

\uD83D\uDD0D Observer Comparison

' + 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 = ` -
+
← Back to ${nodeName}

📊 ${nodeName} — Analytics

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 = ` -
+
←

Observer Detail

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 = '

⚡ Performance Dashboard

Loading...
'; + app.innerHTML = '

⚡ Performance Dashboard

Loading...
'; 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 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; }