fix(ui): stop header shifting on scrollbar gutter changes

[fullstackjam]

Summary

The site header is a viewport-centered, position: fixed element shared across every route (src/routes/+layout.svelte). A centered fixed element only moves when the viewport width changes — and the vertical scrollbar (~15px) appearing on some pages but not others did exactly that, re-centering the header by half the scrollbar width (~7.5px) on every navigation between a scrolling and a non-scrolling page (e.g. /explore ↔ /docs). That's the visible "jitter."

Fix: reserve the scrollbar gutter on the root element so its space is constant regardless of whether a route scrolls.

:global(html) { scrollbar-gutter: stable; }

scrollbar-gutter: stable no-ops on macOS overlay scrollbars (which never took layout space and never shifted), so it only reserves space for the classic / always-on scrollbars that actually caused the jitter — no permanent empty track for trackpad users.

Test plan

• Reproduced in-browser (Playwright, 1280px wide): isolating the scrollbar as the only variable, header left = 52.5px with scrollbar vs 60px without → 7.5px shift.
• After the fix, the same isolation test reports header left = 52.5px in both states → 0px shift.
• computedStyle(html).scrollbarGutter === 'stable' confirmed applied.

🤖 Generated with Claude Code

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!