[Drawer] Responsive drawer creates scrollbar

[cworf]

I have stumbled on a weird bug when placing a SimpleTable component inside FullWidthTabs (changed from your default 500px to 100% width) inside the main content area of any kind of drawer component scenario. i have tried many combinations and it is ONLY the table inside the swipeable tabs at full width inside a drawer.

• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I expect all content inside the main content area to only ever take up as much space as the screen allows.

Current Behavior

The content inside the main content area extends far past the right side of the screen. this only occurs once the tabs > table combo is placed inside the main content area of a drawer... The tabs > table combo works just fine without the drawer.

Steps to Reproduce (for bugs)

I put together a codesandbox at https://codesandbox.io/s/k94pq84n1o using nothing but your documentation demos, all I changed was the width of the tabs from 500px to 100%, upon entering you will see the working tabs > table combo

1. in the index.js file change the root element to (or )
2. You will see the tabs and table suddenly stretch far beyond the edge of the screen, as if each tab container takes up the full width of all three containers combined
3. If you remove all but one tab container, you will see that a single tab container width is the proper width
4. If you replace with you will see that other full width content clearly functions properly.
5. also in the drawer, if you change to the problem goes away and the tabs function normally, illustrating that this is clearly an issue between your drawer and react-swipeable-views, but ONLY when there is a table involved, haha.

Hopefully this is thourough enough to explain my issue, I tried playing around with it in the sandbox but was not able to get that specific combo to work. in my app for now I will just settle for the non-swipeable non-animated tabs, but it would really be nice to be able to have that functionality.

Thanks!

[kgregory]

@cworf Thanks for submitting the issue, would you mind fixing your codesandbox so it runs?

[cworf]

Weird, this was running when I saved it, I have no idea what is going on here. Its saying im not giving it a component but I clearly am,... its giving me the kind of error I get when I accidentally include curly brackets around my import, but Im not doing that, nor should I be. I literally copied everything over just as it was on your demo components.... any ideas? sorry im relatively new to this.

[oliviertassinari]

@cworf Let us know when the codesandbox is fixed :). We can't help until then.

[nApTu3aHs]

@oliviertassinari Hello. It looks like I've reproduced this error.
Here is the link: https://codesandbox.io/s/material-demo-forked-l479u?file=/demo.js
When the drawer is open, the tabs ignores the width of the drawer and as a result, a horizontal scroll appears on the page.
If the screen is 1000 pixels wide, the drawer is 100 pixels, then the tabs will be 1000 pixels wide instead of 900.

[oliviertassinari]

@nApTu3aHs Thanks for the reproduction. I would propose this fix:

diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
index 6a339e0b43..c0a2e4d080 100644
--- a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
@@ -120,7 +120,10 @@ export default function ResponsiveDrawer(props: Props) {
           {drawer}
         </Drawer>
       </Box>
-      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+      <Box
+        component="main"
+        sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+      >
         <Toolbar />
         <Typography paragraph>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Do you want to work on a pull request? :)

[oliviertassinari]

@nApTu3aHs I don't understand, what's the issue in your recording?

[oliviertassinari]

@nApTu3aHs Ok, so we are good. #10740 (comment) applies the width on the <main> element.

[oliviertassinari]

@nApTu3aHs Then please provide a new minimal reproduction, the issue seems fixed with the proposed patch in https://codesandbox.io/s/material-demo-forked-utgji?file=/demo.js.

[nApTu3aHs]

@oliviertassinari Oh sorry. I was wrong. Your solution actually works. Thanks for your patience and time.