[BUG] MUI Data Grid no longer horizontally scaling (also on official examples)
PercivalFigaro opened this issue · 13 comments
Describe the bug
When the browser window size is reduced, then horizontal scaling does not properly occur (table keeps full width and flows under the sidebar). A hard page refresh correctly resizes the table. Increasing window size scales the Data Grid properly, decreasing window size does not. This bug started occurring last Friday, possibly connected to a Chrome update.
Steps To Reproduce
- Use latest version of Google Chrome
- Open up any of Refine's official examples using MUI and its Data Grid
- Reduce the browser window size by making Chrome dev tools larger
- Instead of scaling, the columns of the Data Grid do not reduce in size and full table width is maintained
Expected behavior
The Data Grid should horizontally scale, not flow under the sidebar
Packages
"@mui/icons-material": "^5.8.3",
"@mui/lab": "^5.0.0-alpha.85",
"@mui/material": "^5.8.6",
"@mui/x-data-grid": "^6.6.0",
"@refinedev/cli": "^2.16.33",
"@refinedev/core": "^4.51.0",
"@refinedev/devtools": "^1.2.3",
"@refinedev/kbar": "^1.3.12",
"@refinedev/mui": "^5.17.0",
"@refinedev/react-hook-form": "^4.8.20",
"@refinedev/react-router-v6": "^4.5.11",
"@refinedev/simple-rest": "^5.0.8",
Additional Context
No response
Hello @PercivalFigaro, I can confirm that there are no issues with Safari, but it is not working properly on Chrome. We will look into this, thank you.
Table example:
https://example.mui.admin.refine.dev/orders
Think sticking in a width 100% is required on the themedLayoutV2
Can also be fixed at the theme level
MuiCssBaseline: {
styleOverrides: {
".MuiBox-root": {
width: "100%", // Set the width to 100% as can break responsiveness of the layout
},
},
},
Thanks for the info. This workaround makes it scale horizontally (tried on the theme level), but only after disappearing behind the sidebar. Also it breaks some other styling on the page, notice the logout button, which worked nicely before:
I'm sure that the data grid worked out of the box before - it stopped working around June 20nd or 21st without any dependency changes in my codebase.
Its probably best to eject the ThemedLayoutV2 and make the update there as overriding the box at theme level could have some other consequences. Was more for quick example
@alicanerdurmaz, as a side note, the problem is more apparent in the official auth-material-ui example rather than the foods app:
I'm 99% sure that it used to work previously and that's why I thought it was related to a Chrome update.
EDIT: on June 25th, I tested with a colleague. He had not updated to the latest Chrome yet. The MUI data grid was scaling nicely on his computer. After he updated Chrome that day, the data grid broke.
I'm not sure if it's a proper fix but disabling the overflow: clip specifically for tablet, desktop media fixes the problem.
For mobile view we should preserve overflow: clip, in other case it breaks the sidebar ui
It's the internal code style of ThemedLayoutV2 so I can't simply rewrite it
Hey, thanks for the comment input - however, it doesn't do the trick for me
Hey @PercivalFigaro,
Did you set the overflow: auto for the Box?
With this example
https://example.mui.admin.refine.dev/orders?pageSize=10¤t=1
Its width 100% that will fix it on chrome
Hello! I have same urgent issue. Do we have any result solution?
I can fix it in devTools, but how fix in the code?
Hey everyone, sorry for the issue. I've opened a PR #6144 including a fix for with a small tweak in the content section of the layout. I also included a preview deploy for the finefoods-material-ui example in the PR, https://deploy-preview-6144--finefoods-admin-mui.netlify.app Can someone check and validate if this fixes the issue? 🙏
Until this is released, temporarily swizzling the ThemedLayoutV2 component and applying the fix can be used as a workaround 🚀
Thanks a lot!