From 6f3385d5e4ce105d5540e97d2c7ea147da1720f2 Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Sat, 28 Feb 2026 03:20:43 +1100 Subject: [PATCH] fix: resolve stability in `scrollbar-gutter: stable` (#22387) 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`). --- site/src/index.css | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/site/src/index.css b/site/src/index.css index c446d9ee07..881a715d6b 100644 --- a/site/src/index.css +++ b/site/src/index.css @@ -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; + } } /*