Buttons are not clickable within AppShell.Main in v7

[ybainazar]

Hi, moved to mantine v7, and faced with the issue in AppShell:

• clickable components (Mantine Button or ) are not responding(onClick do nothing) if they are defined in AppShell.Main
• tried within router and directly adding Button component to AppShell.Main
• works fine within AppShell.Header or AppShell.Navbar
• works fine in Mantine v6

Maybe someone faced with the same issue? What it can be?

[rtivital]

I cannot reproduce the issue on codesandbox – https://codesandbox.io/s/hungry-feather-5z53c6?file=/src/App.tsx
The button is clicked normally

[ybainazar]

thanks for quick the response!
Yes, I see that works in your sandbox.
Have no idea why I have such behaviour. Copied the same Button component to AppShell.Header (or NavBar) and everything works as expected, in Main doesnt.
Maybe you will have any suggestions where to explore?

[rtivital]

It is hard to tell without reproduction

[moathar]

I've hit the same issue! I'm using Mantine in a Next.js project (first time with Mantine!). I thought the AppShell was a nice way to create the layout but now I can't seem to click on anything in the main section, whether it's on the first level or through rendered children.

Using Mantine 7.14 with Next.js 15, React 19. Afraid can't share the code sample.

I really hope there's a fix/workaround for this as I have chosen Mantine after trying a few other UI libraries which didn't feel as nice.

[KaziQ]

I've just hit the same issue. For whatever reason you probably have the header padding bottom set and since the header sits on top, it sits on top of the main. You can either set the components' zIndex to >= 100 or get rid of the padding bottom of your header. For example, in my case, I am using the HeaderMegaMenu.tsx example that returns everything wrapped in <Box pb={120}>. If you get rid of the padding, the problem is solved. You can test this with trying to select your button and see what gets selected. It's <div class="" style="padding-bottom: calc(7.5rem * var(--mantine-scale));"> You get rid of the style and the button is clickable. This is because of the padding coming from header like I said in my case. In my case I changed <Box pb={120}> to <Box>. I don't know how this will affect the page negatively overall.

[moathar]

Hi @KaziQ, thanks for your post. Yeah, removing the padding fixed the issue. Great to see that there is no issue with AppShell itself, it's just the example code.

[KaziQ]

No problem. I've started using Mantine myself just recently. It seems great so far. Kudos to the people that made it.

[KaziQ]

I've sent a pull request for the small change.