Commitce4c8c7

authored

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 whenthe` Select` is open. This fix prevents the layout shift from thescrollbar being removed.https://github.com/user-attachments/assets/6b0aff70-c585-401b-911d-f0805b54903e

1 parente8306cc commitce4c8c7Copy full SHA for ce4c8c7

File tree

+13

-0

lines changed

+13

-0

lines changed

Lines changed: 13 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -112,4 +112,17 @@`
`112`	`112`	`html {`
`113`	`113`	`scrollbar-gutter: stable;`
`114`	`114`	`}`
	`115`	`+`
	`116`	`+/*`
	`117`	`+ This is a temporary fix for MUI Modals/Popovers until they are removed.`
	`118`	`+ When html has scrollbar-gutter: stable, the browser reserves space for the scrollbar.`
	`119`	+ MUI Modals/Popovers, when locking body scroll, add `overflow: hidden` and `padding-right`
	`120`	`+ to the body to compensate for the scrollbar they are hiding. This added padding-right`
	`121`	`+ conflicts with the already reserved gutter space, causing a layout shift.`
	`122`	`+ This rule overrides MUI's added padding-right on the body specifically when MUI`
	`123`	`+ is likely to have set both overflow:hidden and padding-right.`
	`124`	`+*/`
	`125`	`+body[style="overflow: hidden"][style="padding-right"] {`
	`126`	`+padding-right:0px!important;`
	`127`	`+}`
`115`	`128`	`}`

Comments

(0)