fix: prevent layout shift when Select component dropdown appears (#17990)

jaaydenh · web-flow · commit ce4c8c74519a · 2025-05-23T15:51:14.000-04:00
When scrollbars are always visible, open the dropdown for a `Select `component causes a layout shift because of scrollbars being hidden when the` Select` is open. This fix prevents the layout shift from the scrollbar being removed. https://github.com/user-attachments/assets/6b0aff70-c585-401b-911d-f0805b54903e
diff --git a/site/src/index.css b/site/src/index.css
@@ -112,4 +112,17 @@
 	html {
 		scrollbar-gutter: stable;
 	}
+
+	/*
+	  This is a temporary fix for MUI Modals/Popovers until they are removed.
+	  When html has scrollbar-gutter: stable, the browser reserves space for the scrollbar.
+	  MUI Modals/Popovers, when locking body scroll, add `overflow: hidden` and `padding-right`
+	  to the body to compensate for the scrollbar they are hiding. This added padding-right
+	  conflicts with the already reserved gutter space, causing a layout shift.
+	  This rule overrides MUI's added padding-right on the body specifically when MUI
+	  is likely to have set both overflow:hidden and padding-right.
+	*/
+	body[style*="overflow: hidden"][style*="padding-right"] {
+		padding-right: 0px !important;
+	}
 }
