[BUG] - Mobile navbar on IOS

[LupuC]

NextUI Version

Latest

Describe the bug

I want to add some button on mobile navbar at the bottom. The problem is that, if I use a h-full/ h-screen, the button will be shown (on IOS ONLY), after the safari bottom navigation bar.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

            <NavbarMenu className="h-full">
                <div className="mx-4 mt-2 flex flex-col justify-between h-screen gap-2">
                    <div className="flex flex-col gap-2">
                        {siteConfig.navItems.map((item, index) => (
                            <NavbarMenuItem key={`${item}-${index}`}>
                                <Link
                                    color={
                                        index === 2
                                            ? "primary"
                                            : index === siteConfig.navItems.length - 1
                                                ? "danger"
                                                : "foreground"
                                    }
                                    href="#"
                                    size="lg"
                                >
                                    {item.label}
                                </Link>
                            </NavbarMenuItem>
                        ))}
                    </div>
                    <div className="w-full flex items-center gap-4 ">
                        {/* <Button
                            isExternal
                            as={Link}
                            className="text-sm font-normal text-default-600 bg-default-100 w-full rounded-md"
                            href={siteConfig.links.sponsor}
                            variant="ghost"
                        >
                            Sign Up
                        </Button> */}
                        <Button
                            isExternal
                            as={Link}
                            className="text-sm font-semibold text-background bg-foreground w-full rounded-md"
                            startContent={<PlugZap className="size-5 " />}
                            href={siteConfig.links.sponsor}
                            variant="flat"
                        >
                            Some button here
                        </Button>
                    </div>
                </div>

            </NavbarMenu>

Expected behavior

I'm expecting the h-screen to take the visible part.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/62475718/b8cb15a1-8ad4-4ecd-b284-2e648dbf9026

Operating System Version

Windows

Browser

Safari

[linear[bot]]

ENG-808 [BUG] - Mobile navbar on IOS

[rd-xx]

I stumbled across this issue a few weeks ago. This has nothing to do with NextUI, it's a CSS problem. Try using min-h-dvh instead of h-screen

See this SO answer for more details: https://stackoverflow.com/a/75648985

[LupuC]

I stumbled across this issue a few weeks ago. This has nothing to do with NextUI, it's a CSS problem. Try using min-h-dvh instead of h-screen

See this SO answer for more details: https://stackoverflow.com/a/75648985

I've already tried that, and no success. I've also tried with the "stock" navbar from nextui website (not the one that comes with nextjs), and it's the same thing..

I came to conclusion that, the problem comes from here:

which has --navbar-height: 4rem; that causes the problem.. My workaround would be: removing that style, and adding a padding-top of 4 rem. but i cannot find that piece of code, to remove it....

[LupuC]

Fixed it. I had to pass the height prop as empty <Navbarr onMenuOpenChange={setIsMenuOpen} height={""}>

then for the menu: <NavbarMenu className="flex justify-between min-h-dvh pt-[4rem]">