Latest Chrome (130.x.x) breaking AppShell and Modal layout in some cases?

[cmehendale]

Hi -

I noticed that the new Chrome update last week (130.x.x), on Linux at least, seems to have broken some AppShell and Modal functionality. Perhaps even other stuff. It was working in Chrome 129.x.x (and I double checked by downgrading Chrome using an older deb).

Mantine version from my package.json - "@mantine/core": "^7.11.1"
(I see that the latest is 7.13.3 but the issues are reproducible with that version as well)

I suspect, and I am just guessing here, it could perhaps be due to the new CSS Nesting functionality implemented in 130.x.x (https://chromestatus.com/feature/5084403030818816)?

What I see -

• When the AppShell.Main contains a child component with a width larger than the browser viewport, the left side of the child component gets hidden under the side bar. The difference I see is that the #root (if you're using react) node does not take the width of the body node (like it did in Chrome v129.x.x), but instead it takes the width of its content. Setting the #root node width explicitly to 100% seems to fix this.

• The centered Modal goes outside the browser viewport on the right side. Again, the difference I see is that the div.mantine-Modal-root does not have any width (w=0,h=0) whereas in Chrome 129.x.x it has w = the width of its parent. Setting the div.mantine-Modal-root width explicitly to calc(100dvw * var(--mantine-scale)) seems to fix this.

Not sure if these fixes are fine or whether they will cause other problems.

Has anyone else seen similar issues due to the upgrade? Any update/feedback is appreciated!

Thanks in advance!

[carrasquel]

I am experiencing this as well, I managed to fix the modal with your suggestion but I'm also facing a different issue is that each page inside the AppShell.Main its width is fixed to the inner content, so each pages has its own width, I fixed it with 100% on width for root as well, it works fine in firefox

[infopcgood]

I have the same issues too. (AppShell.Main shrinks, modals go to the right side of the screen making half of it hidden). The CSS that @cmehendale provided is a valid fix to the modal problem, and I had to manually apply width: 100% for the root component in my CSS for the shrinking problem.

• the breaking occurs on Windows, Linux and Android too.

[wrth1337]

I encountered the same issues on Chrome version 130.x.x. I tested several older versions (127, 128, 129), but didn't experience any problems with those.

[rtivital]

Hi everyone, you are welcome to research the issue and provide a PR with a fix

[mi-k-a]

I fixed it using MantineProvider (v6)

components: { Modal: { styles: { root: { width: "100vw" }, }, }, },