AppShell Navbar footer hidden for mobile users with address bar on top

[sunneydev]

What package has an issue

@mantine/core

Describe the bug

As mobile browsers implement vh units as the height of the screen the bottom part of the Navbar is not visible unless you manually scroll.

Footer not visible

Footer visible after scrolling

In which browser did the problem occur

Any mobile browser with address bar on top

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

https://codesandbox.io/s/beautiful-water-4ipk7d

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 response

Possible fix

credits to @mattrunyon

Adding sx={{ bottom: 0, height: "auto" }} to Navbar

[rtivital]

Thanks for reporting and investigation

[TobiasHansen]

Also getting this error, let me know if more information is needed.

[rayhk6]

Thanks for the temporary solution.

[IAFahim]

I have figured out if you add a bottom padding of paddingBottom: props.theme.spacing.xl it goes away GitHub link

[rtivital]

Fixed in 5.1.4, Navbar now has bottom: 0 css property, we cannot set height to auto though as there are header and footer height dependencies in css variables. Height can be set with corresponding prop: <Navbar height="auto" />