fix(zoom): correctly size fullscreen graph panels on Safari under html{zoom} (#70)

[BorisTyshkevich]

What & why

The whole UI rides on html { zoom: var(--zoom) }. The pointer/caret/drag math self-calibrates to the live getBoundingClientRect/offsetWidth ratio (the zoom factor on Chromium, 1 on WebKit/Safari), so it was already correct on every engine. The genuine divergence is viewport units under zoom: Chromium's vw/vh ignore it (100vh overshoots one screen by the zoom factor) while WebKit/Safari's track it (100vh == one screen). The fullscreen schema / EXPLAIN graph panels size off vw/vh and hard-coded calc(.../var(--zoom)), which shrank them to ~83% on Safari.

Per the two-step plan in #68 / the issue comment, this is step 1 (the 1.0 fix); step 2 (full zoom removal) stays folded into the Phase 3/5 coordinate-path rewrites (#21/#66).

The fix

• Runtime measurement — app.applyViewportZoom() measures the real overshoot (a 100vh probe vs the one-screen #root) and publishes it as --vp-zoom (~--zoom on Chromium, ~1 on Safari). The three fullscreen panels divide their vw/vh by --vp-zoom, so they fit exactly one screen on both engines. Pure viewportZoom() in src/core/zoom-support.js (100% covered); the DOM measurement is an injected seam; the opener mirrors --vp-zoom onto the schema graph's child tab.
• CSS — --vp-zoom defaults to var(--zoom) (Chromium-correct) when unmeasurable, so behaviour never regresses; @supports not (zoom: 1) still neutralizes the factor on engines that can't parse zoom at all.
• Expand icon (src/ui/icons.js) — re-centred + symmetric so it renders consistently at ~12px instead of blurring into solid [ ] brackets on Chrome/Firefox (a pre-existing cosmetic bug surfaced during manual Safari testing; folded in here as it's the Expand button that opens these panels).

This supersedes the earlier abandoned "mis-scaling banner" approach: the rect ratio can't tell a working Safari (ratio 1.0) from a broken engine, so that guard false-positived on Safari — the very engine #70 targeted.

Verification

• Local unit gate green (1028 tests; zoom-support.js 100/100/100/100), build clean.
• Chromium (agent Chrome): divisor 1.2, panel fits with just the 48px padding gap; icon clean.
• Real Safari (manual): the fullscreen panels now fit one screen ✅ (bug + fix confirmed by the maintainer).
• tests/e2e/zoom-support.spec.js guards the panel-fit mechanism on all three CI engines. Caveat: Playwright's WebKit applies zoom to getBoundingClientRect/viewport units like Chromium, not like real Safari, so it is not a faithful Safari proxy for this behaviour — the real-Safari path is verified manually (tracked in the Document the supported-browser matrix (browsers, ClickHouse versions, IdP requirements) #71 matrix).

Acceptance (issue #70)

• Confirmed correct on the support matrix (Safari panel sizing fixed + manually verified; Chromium/Firefox unaffected) and a feature-guard/fallback is in place (--vp-zoom + @supports).
• No silent wrong-scale state on an engine that doesn't honor zoom (CSS 1× fallback for parse-failure; runtime-measured divisor for the viewport-unit divergence).
• npm test + e2e green; per-file coverage gate holds.

Checklist

• npm test passes (the per-file coverage gate is non-negotiable)
• Tests added/updated in the same change as the code
• npm run build succeeds (single-file dist/sql.html)
• Layers kept honest: pure logic in src/core/, DOM behind injected seams
• No new runtime dependency
• README / CHANGELOG.md ([Unreleased]) updated
• Reconciled affected tracked work (roadmap Roadmap to 1.0.0 #68, the issue body, Document the supported-browser matrix (browsers, ClickHouse versions, IdP requirements) #71 matrix note)

🤖 Generated with Claude Code