From ce4c8c74519a242431dd70980eb9e4c9b1bf6d34 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 23 May 2025 20:51:14 +0100 Subject: [PATCH] fix: prevent layout shift when Select component dropdown appears (#17990) 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 --- site/src/index.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/site/src/index.css b/site/src/index.css index 36f1c62954..04b388a5cb 100644 --- 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; + } }