AppShell padding error

[Pivigor]

What package has an issue

@mantine/core

Describe the bug

AppShell uses CSS variables for padding definition like this:

paddingTop: `calc(var(--mantine-header-height, 0) + ${padding})`,
paddingBottom: `calc(var(--mantine-footer-height, 0) + ${padding})`,
paddingLeft: `calc(var(--mantine-navbar-width, 0) + ${padding})`,
paddingRight: `calc(var(--mantine-aside-width, 0) + ${padding})`,

If one of these variables is not declared, for example --mantine-header-height, then we get:

paddingTop: `calc(0 + 1rem)`,

There will be an error here, and this padding property will be skipped.

I think this is a problem because padding will not work if there is no corresponding component.
For example, if a component was temporarily hidden, this leads to unexpected jumps.

mantine/src/mantine-core/src/AppShell/AppShell.styles.ts

Lines 35 to 38 in c2f0c51

	paddingTop: `calc(var(--mantine-header-height, 0) + ${padding})`,
	paddingBottom: `calc(var(--mantine-footer-height, 0) + ${padding})`,
	paddingLeft: `calc(var(--mantine-navbar-width, 0) + ${padding})`,
	paddingRight: `calc(var(--mantine-aside-width, 0) + ${padding})`,

What version of @mantine/hooks page do you have in package.json?

6.0.0

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

It seems to me that it should be like this:

paddingTop: `calc(var(--mantine-header-height, 0rem) + ${padding})`,
paddingBottom: `calc(var(--mantine-footer-height, 0rem) + ${padding})`,
paddingLeft: `calc(var(--mantine-navbar-width, 0rem) + ${padding})`,
paddingRight: `calc(var(--mantine-aside-width, 0rem) + ${padding})`,

[samzmann]

AppShell content has no paddingRight after upgrading to v6. I guess it's related to this issue.

[rtivital]

Fixed in 6.0.1