Fix dialog scrollbar shifting

mdo · mdo · commit fa1cc64fc238 · 2026-05-01T11:10:17.000-07:00
diff --git a/scss/_dialog.scss b/scss/_dialog.scss
@@ -62,7 +62,6 @@ $dialog-sizes: defaults(
   // Prevent body scroll when dialog is open
   .dialog-open {
     overflow: hidden;
-    scrollbar-gutter: stable;
   }
 
   .dialog {
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -172,6 +172,9 @@ $root-tokens: map.set($root-tokens, --radius-pill, 50rem);
   @include tokens($root-tokens);
 
   color-scheme: light dark;
+  // Always reserve the viewport scrollbar gutter so layout doesn't shift
+  // when overflow: hidden is applied (e.g. when a dialog opens on Windows).
+  scrollbar-gutter: stable;
 }
 
 [data-bs-theme="dark"] {

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,6 @@ $dialog-sizes: defaults(`
`62`	`62`	`// Prevent body scroll when dialog is open`
`63`	`63`	`.dialog-open {`
`64`	`64`	`overflow: hidden;`
`65`		`- scrollbar-gutter: stable;`
`66`	`65`	`}`
`67`	`66`
`68`	`67`	`.dialog {`
Original file line number	Diff line number	Diff line change
`@@ -172,6 +172,9 @@ $root-tokens: map.set($root-tokens, --radius-pill, 50rem);`
`172`	`172`	`@include tokens($root-tokens);`
`173`	`173`
`174`	`174`	`color-scheme: light dark;`
	`175`	`+ // Always reserve the viewport scrollbar gutter so layout doesn't shift`
	`176`	`+ // when overflow: hidden is applied (e.g. when a dialog opens on Windows).`
	`177`	`+ scrollbar-gutter: stable;`
`175`	`178`	`}`
`176`	`179`
`177`	`180`	`[data-bs-theme="dark"] {`