opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve stability in scrollbar-gutter: stable (#22387)

Browse Source 
Replaces the approach in #22061 (with a cleaner `git history`)

This now ensures that we don't attempt to cause a layout shift when the
sidebars pop-in-out of existence (when scroll locking within `radix`).
This commit is contained in:
Jake Howell
2026-02-28 03:20:43 +11:00
committed by GitHub
parent 6c097797a1
commit 6f3385d5e4
1 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/index.css
+16 -12
View File
@@ -135,22 +135,26 @@
@apply border-none p-0 m-0 w-full;
}
/*
By default, Radix adds a margin to the `body` element when a dropdown is displayed,
causing some shifting when the dropdown has a full-width size, as is the case with the mobile menu.
To prevent this, we need to apply the styles below.
/* Prevent layout shift when modals open by maintaining scrollbar width.
scrollbar-gutter: stable reserves space for the scrollbar so Radix's
scroll-bar compensation (margin-right/padding-right) is unnecessary
and causes double spacing. We zero it out with !important to win
over Radix's injected !important styles. The @supports guard ensures
we only do this on browsers that actually support scrollbar-gutter.
There’s a related issue on GitHub: Radix UI Primitives Issue #3251
https://github.com/radix-ui/primitives/issues/3251
*/
html body[data-scroll-locked] {
--removed-body-scroll-bar-size: 0;
margin-right: 0;
}
*/
@supports (scrollbar-gutter: stable) {
html {
scrollbar-gutter: stable;
}
/* Prevent layout shift when modals open by maintaining scrollbar width */
html {
scrollbar-gutter: stable;
html body[data-scroll-locked] {
--removed-body-scroll-bar-size: 0 !important;
margin-right: 0 !important;
overflow-y: scroll !important;
}
}
/*