ui: reserve the scrollbar gutter so the top bar stops shifting between pages

Pages tall enough to scroll showed a ~15px scrollbar; short pages didn't — so the
centered top bar jumped left/right as you navigated. scrollbar-gutter: stable on html
(SPA app.css + the server-rendered share pages) keeps the layout width constant. No-op
on overlay-scrollbar platforms (mobile), which never shifted.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-30 04:52:59 -04:00
parent 3740e09d02
commit 86d9897113
3 changed files with 6 additions and 1 deletions
+4 -1
View File
@@ -34,7 +34,10 @@
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Always reserve the scrollbar gutter so the centered top bar / content doesn't jump
left-right between pages that scroll and pages that don't. (No-op on overlay-scrollbar
platforms like mobile, which never shifted anyway.) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
margin: 0;
background: var(--bg);