DataGrid is not resizing properly inside DashboardLayout

[Petar-Dimitrov-AXA]

Steps to reproduce

When using DataGridPro within DashboardLayout, the table does not resize properly when the menu is expanded.

Here are the steps to reproduce the issue:

1. Use the DataGridPro component with sufficient horizontal data and integrate it into a page with routing and navigation using
   React and toolpad.
2. Initially, everything renders correctly.
3. Collapse the menu and then expand it, at which point the DataGrid table does not resize properly.

To resolve this issue, you can add overflow: hidden to the 4th DOM element, which, in my case, is a div with the classname
MuiBox-root and is a child of the AppProvider root element.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: DataGridPro DashboardLayout

[Janpot]

Could you provide a codesandbox for us to demonstrate the issue? It's the best way for us to strip all ambiguity from the reproduction.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[apedroferreira]

Even without a codesandbox reproduction we can still try to reproduce it from the initial instructions at least.
(The issue had auto-closed so I reopened it)

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[Petar-Dimitrov-AXA]

The issue seems to be still closed. I didn't hat time the last week. I also am not able to make some sandbox example. That what I can do is to attach some screenshots from our system.

[Janpot]

We can't debug from a screenshot. What's preventing you from creating a codesandbox?

[Petar-Dimitrov-AXA]

Time

[christiancookbuzz]

I've worked around this issue by applying overflow: hidden to the DashboardLayout nested Box component (Which is referenced in the original issue):

<DashboardLayout
    sx={{
        '& > .MuiBox-root': {
            overflow: 'hidden'
        }
    }}
>

[apedroferreira]

There was an issue with the horizontal overflow in the dashboard.
Maybe this fix in the next release will solve this issue too? #4414