Stabilize mobile map height and debounce invalidateMapSize (fix dvh flicker)

[badjoke-lab]

Motivation

• Prevent mobile browser UI show/hide from toggling 100dvh and triggering repeated Leaflet resize calls that cause full-screen flicker.
• Make invalidate/resize behavior resilient to rapid viewport/visualViewport events so the map isn't re-laid out multiple times during a single interaction.
• Preserve sheet overlay UX while adding developer-facing diagnostics to validate the fix and trace future regressions.

Description

• Replace the inline 100dvh height on .cpm-map-root with a stable CSS variable driven by window.innerHeight by adding a client-only effect that writes --cpm-app-vh and updates on resize and visualViewport with a 120ms debounce, and use height: calc(var(--cpm-app-vh, 1vh) * 100 - var(--cpm-header-h, 64px)) (in components/map/MapClient.tsx).
• Debounce and dedupe map invalidation by changing invalidateMapSize(reason) to aggregate calls into a single execution within a 150ms window, treat the open reason specially (300ms delayed single call), and ignore duplicate visualViewportResize events within the debounce window (in components/map/MapClient.tsx).
• Add container height logging, viewport/center sync logs, and safer map event wiring to keep traceability of viewport changes while preserving prior sheet behavior (in components/map/MapClient.tsx).
• Enhance mobile sheet with a HUD and rich instrumentation to capture DOM size snapshots, element style metadata, recent input, and JS activity counts; add debug toggles and a five-tap logo shortcut in the header to enable the HUD without code edits (in components/map/MobileBottomSheet.tsx and components/GlobalHeader.tsx).

Testing

• npm run build completed successfully (build + typecheck; Next warnings only). (success)
• Dev server started with npm run dev and served /map locally. (success)
• Automated Playwright mobile repro run against the local dev server exercising /map (mobile viewport, pin tap → sheet open → 10s wait) captured HUD output and a screenshot; HUD shows no repeated Leaflet resize (captured output: leaflet resize count: 0). (success)

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
cryptopaymap-v2	Ready	Preview, Comment	Feb 21, 2026 3:35am