[material-ui][Drawer] Temporary drawer changes content and header width when open in an iframe

[apedroferreira]

Steps to reproduce

In the "Responsive drawer" example in https://mui.com/material-ui/react-drawer, if you expand the mobile menu, the contents of the header and page content disappear, which I'm not sure is expected.

Here's a preview in Toolpad where part of the behavior can also be observed: https://deploy-preview-3893--mui-toolpad-docs.netlify.app/toolpad/core In the iframe with the example dashboard layout, if you expand the mobile menu (which uses a Drawer component with variant="temporary"), you can see that the page content disappears because its width becomes 0 when the mobile menu opens.

Even in the AppBar and Toolbar components we use for the header, we needed to add left: 0 to the AppBar and width: 100vw to the Toolbar so that the content of the header would not disappear when the mobile menu is opened in this example. When the mobile menu is not open, everything works normally.

DashboardLayout component: https://github.com/mui/mui-toolpad/blob/master/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

Current behavior

See "Steps to reproduce".

Expected behavior

The page content and header content would remain in the same place when a temporary Drawer is open inside an iframe.

Context

We were trying to make our implementation of a dashboard layout in Toolpad work as it now does in https://deploy-preview-3905--mui-toolpad-docs.netlify.app/toolpad when the mobile menu is expanded (content does not shift or disappear).

We've fixed it by forcing width: 100vw in the page content in https://github.com/mui/mui-toolpad/pull/3905, as we already do in the header too, but these could be considered just superficial fixes to a deeper problem with the drawer?

Might not be completely unintentional or the biggest priority, but just bringing up this issue! Let me know if you need any more info or clarity.

Your environment

System: OS: macOS 14.5 Binaries: Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm pnpm: 9.4.0 - /usr/local/bin/pnpm Browsers: Chrome: 127.0.6533.100 Edge: Not Found Safari: 17.5 npmPackages: @mui/internal-docs-utils: 1.0.9 => 1.0.9 @mui/internal-markdown: 1.0.9 => 1.0.9 @mui/internal-scripts: 1.0.15 => 1.0.15 @mui/monorepo: github:mui/material-ui#b9a041d089cb50067b853b18fe2b140b2e2f0810 => 6.0.0-beta.5 @mui/x-charts: 7.12.0 => 7.12.0 typescript: 5.5.4 => 5.5.4

Search keywords: drawer temporary width

[DiegoAndai]

Thanks for the report @apedroferreira 😊, this does seem like a bug.

[albarv340]

Hi!

My name is Albin, and I'm excited to start contributing to MUI!

You will probably see more of me around here in the coming months, as I plan on contributing as much as I can. I have quite of bit of prior experience with JS/TS and React and would love to put it to use by helping improve something as useful to me as MUI.

I will start by tackling this issue. 😊

[albarv340]

The issue was caused by the usage of the main window instead of the iframe's window when calculating the width of the scroll bar, which made the scroll bar seem a lot wider than it actually was. This made the content on the page compress to be small enough to fully fit behind the drawer, thus hiding it entirely. For now, I only fixed this issue when used in combination with what caused the problems this issue addresses, but since the getScrollbarSize is used by many other components as well, it is probably a good idea to look into if it causes any other strange bugs anywhere. However, I don't know if that fits into this issue, or if I should create another issue addressing that.