fix(site): prevent layout shift when opening dropdowns on /agents page - #22448
Merged
Conversation
The agents page opts out of the global scrollbar-gutter: stable because
it uses internal scroll containers and the reserved gutter wastes space.
However, simply setting scrollbar-gutter: auto broke the global
body[data-scroll-locked] CSS fix in index.css, which assumes stable
gutter is always active.
When a Radix dropdown opened, two things caused layout shift:
1. react-remove-scroll-bar measures gap = window.innerWidth -
document.documentElement.clientWidth. With scrollbar-gutter: stable
the gutter is reserved even without overflow, so gap > 0 and the
library injects padding-right/margin-right on html/body.
2. The global CSS rule `html body[data-scroll-locked] { overflow-y:
scroll !important }` forces a scrollbar onto body when Radix locks
scroll, creating a scrollbar that never existed on this page.
Fix with a single useEffect that:
- Sets overflow:hidden on both <html> and <body> so neither can produce
a scrollbar.
- Sets scrollbar-gutter:auto on <html> so the browser stops reserving
gutter space, making the react-remove-scroll-bar gap measurement 0.
- Injects a <style> tag with matching specificity that overrides the
global overflow-y:scroll rule on body[data-scroll-locked].
All changes are scoped to the agents page via useEffect cleanup.
Contributor
Author
|
So janky but it appeared to work for me + should be completely contained to this page |
kylecarbs
approved these changes
Mar 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Opening any dropdown (Select, DropdownMenu) on the
/agentspage caused visible layout shift.The agents page previously overrode the global
scrollbar-gutter: stabletoautoon<html>to reclaim the unused gutter space (the page uses internal scroll containers). This broke the globalbody[data-scroll-locked]CSS inindex.css, which assumes stable gutter is always active.When a Radix dropdown opened, two mechanisms caused the shift:
react-remove-scroll-bargap compensation — it measureswindow.innerWidth - document.documentElement.clientWidth. Withscrollbar-gutter: stablethe gutter is reserved even without overflow, so the gap is non-zero and the library injectspadding-right/margin-righton<html>/<body>.Global
overflow-y: scroll !important— the CSS rule onhtml body[data-scroll-locked]forces a scrollbar onto<body>when Radix locks scroll, creating a scrollbar that never existed on this page.Fix
A single
useEffectinAgentsPage.tsxthat:overflow: hiddenon both<html>and<body>so neither can produce a scrollbar.scrollbar-gutter: autoon<html>so the browser stops reserving gutter space, makingreact-remove-scroll-barmeasure a gap of 0.<style>tag (html body[data-scroll-locked] { overflow-y: hidden !important }) that overrides the global rule with matching specificity, winning by source order.Everything is cleaned up on unmount — no other pages are affected.