[Modal] Support scrollbar-gutter

[oliviertassinari]

Steps to reproduce

Steps:

1. Add this CSS to the page:

html {
  scrollbar-gutter: stable;
}

and render a <Modal> component, e.g.

Screen.Recording.2024-01-23.at.01.32.26.mov

Current behavior

The layout moves and the backdrop doesn't cover the whole page.

Expected behavior

Either scrollbar-gutter: auto is set as a temporary reset while the dialog is open (better) or no padding is added to the body.

Context

• The issue is with Base UI's Modal component.
• I wondered if this could make sense for the flesh of the CssBaseline component [CssBaseline] Consider rework material-ui#38507, but feat(prefight): use scroolbar-gutter: stable tailwindlabs/tailwindcss#8234 does have a point. It's not something you want 100% of the time, it doesn't make sense with e.g. Google Maps.

TODO

• To change the approach in [docs-infra] Reserve space for scrollbar material-ui#40749 once this issue is solved (probably in the same PR actually)

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: scrollbar gutter

[oliviertassinari]

A side note, a similar outcome can be achieved with the overflow-y style:

html {
  overflow-y: scroll;
}

but it's not ideal, see the difference in UX (Windows):

Screen.Recording.2024-01-24.at.00.34.21.mov

[oliviertassinari]

Related https://frontendmasters.com/blog/scroll-locked-dialogs/

[vladmoroz]

Done in #604

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.