Wide DataGrid makes <main> overflow.

It just happened recently to my production and dev. All of sudden, when there are any descendant of <main> which renders DataGrid wide enough, instead of the

DataGrid

DataGrid

DataGrid

DataGrid that overflow, the whole

main

main

main

main overflowed. All my previous commits which had no such problems before also effected.
I suspect maybe the problem happened inside

ThemedLayoutV2

ThemedLayoutV2

ThemedLayoutV2

ThemedLayoutV2 component.

Currently my work around is to add

<Container>

<Container>

<Container>

<Container> as direct child of

ThemedLayoutV2

ThemedLayoutV2

ThemedLayoutV2

ThemedLayoutV2 like this:

<ThemedLayoutV2 Header={() => <Header sticky />}>
  <Container disableGutters>
    <Outlet />
  </Container>
</ThemedLayoutV2>

<ThemedLayoutV2 Header={() => <Header sticky />}>
  <Container disableGutters>
    <Outlet />
  </Container>
</ThemedLayoutV2>

<ThemedLayoutV2 Header={() => <Header sticky />}>
  <Container disableGutters>
    <Outlet />
  </Container>
</ThemedLayoutV2>

<ThemedLayoutV2 Header={() => <Header sticky />}>
  <Container disableGutters>
    <Outlet />
  </Container>
</ThemedLayoutV2>

But it's still glichy, where sometime after certain navigation, the DataGrid spans all over the main again rendering an overflow.

Wide DataGrid makes <main> overflow.

Similar Threads

Similar Threads

Similar Threads