[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.

https://github.com/mui/material-ui/assets/3165635/45c6fba0-f34c-4b71-91c6-791bad4fa94a

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 mui/material-ui#38507, but https://github.com/tailwindlabs/tailwindcss/pull/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 mui/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]

@DiegoAndai I removed the Material UI v7 milestone: There is no need for a breaking change, this could be fixed tomorrow, and it's Base UI that needs to be fixed.

Also changed the [tag] to match with the GitHub label ([modal]).

[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):

https://github.com/mui/material-ui/assets/3165635/f73ccd36-d2e5-41b5-a859-a4dcc0ff7022

[oliviertassinari]

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

[vladmoroz]

Done in #604

[github-actions[bot]]

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.