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

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

Browse Source 
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
This commit is contained in:
Jaayden Halko
2025-05-23 15:51:14 -04:00
committed by GitHub
parent e8306cc790
commit ce4c8c7451
1 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/index.css
+13
View File
@@ -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;
}
}