[BUG] MUI Data Grid no longer horizontally scaling (also on official examples)

[PercivalFigaro]

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

1. Use latest version of Google Chrome
2. Open up any of Refine's official examples using MUI and its Data Grid
3. Reduce the browser window size by making Chrome dev tools larger
4. 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

[alicanerdurmaz]

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

[joe-noumena]

Think sticking in a width 100% is required on the themedLayoutV2

[joe-noumena]

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
        },
      },
    },

[PercivalFigaro]

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.

[joe-noumena]

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

[PercivalFigaro]

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