fix(site): stop forcing overflow-y on the scroll-locked body - #29236
fix(site): stop forcing overflow-y on the scroll-locked body#29236DanielleMaywood wants to merge 2 commits into
Conversation
The global scrollbar rules forced overflow-y: scroll on body[data-scroll-locked] so the scrollbar would not disappear while a Radix overlay was open. On the agents page, where <html> has inline overflow: hidden, the forced scroll no longer propagated to the viewport and instead grew a scrollbar on <body>, reserving width and shrinking the page every time a popover opened. The forced scroll is unnecessary: scrollbar-gutter: stable keeps the gutter reserved while the body is locked, so page width is stable even though the scrollbar is hidden. Remove it, along with the agents page <style> injection that existed only to override it.
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6c0a5bc66e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| Do not set overflow-y on body[data-scroll-locked]. A forced overflow-y | ||
| overrides the scroll lock. On pages that set overflow: hidden on | ||
| <html> (for example /agents), the body then shows a new scrollbar and | ||
| the page width changes. |
There was a problem hiding this comment.
Add visual coverage for scroll-lock layout behavior
With classic scrollbars, this changes page-width behavior for every scroll-locking Radix overlay, but no story opens an overlay while rendering either a scrollable dashboard page or the /agents layout. The existing AgentsPageLayout stories therefore never activate data-scroll-locked, so Pixel cannot catch the layout shift this fix targets or a regression to it; add a story whose play function opens the affected dropdown or dialog on an overflowing page.
AGENTS.md reference: site/AGENTS.md:L7-L7
Useful? React with 👍 / 👎.
Stops layout shift from happening on the AgentsPage when opening a portal/dialog/dropdown.
LLM Slop description
Opening any popover or dropdown on the agents page slightly shrank the visible page width, because the global scrollbar rules forced
overflow-y: scroll !importantonbody[data-scroll-locked]. On the agents page, where<html>has inlineoverflow: hidden, the forced scroll no longer propagated to the viewport and instead grew a scrollbar on<body>itself, reserving scrollbar width every time a Radix overlay opened.The forced scroll (added in #22387 to keep the scrollbar thumb visible during scroll lock) is not needed to prevent the layout shift:
scrollbar-gutter: stablekeeps the gutter reserved while the body is locked, so page width stays constant even though the scrollbar is hidden. This removes the forcedoverflow-y, along with the agents page<style>injection that existed only to override it (from #22448).One visible trade-off, accepted deliberately: the scrollbar thumb now disappears into the reserved gutter while a modal or dropdown is open, instead of staying painted. This also removes the
!importantcascade dependency that the Tailwind v4 migration (@layer basebecoming a real cascade layer with reversed!importantprecedence) had silently broken.Refs radix-ui/primitives#3251
Verification
Verified against a dev server with classic (layout-consuming) scrollbars:
/agents: sidebar dropdown opens,data-scroll-lockedset, bodyoverflow-y: hidden, page width 1280px before and during, 0px shift/templates(scrollable body): overlay open hides the scrollbar but the stable gutter preserves width, 0px shiftpnpm lint:types,pnpm check,pnpm format, and theAgentsPageLayoutunit tests passGenerated by Coder Agents