Popover Causing Height to Increase

[SnapperGee]

I'm using a Popover component and its height increases beyond its internal components and offsets them upwards unless the display property is set to flex or contents or the height is manually set to the height of its contents or less. Here's the Popover component. All the code was copied over directly from the headlessui except I replaced the PopoverButton contents with an SVG component and added a transition to it (also copied from the headlessui website):

import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
import UserIcon from "../icon/user";

export default function UserButton() {
    return (
        <Popover className="relative">
            <PopoverButton>
                <UserIcon className="size-10 hover:brightness-110" />
            </PopoverButton>
            <PopoverPanel
                anchor="bottom start"
                transition
                className="flex min-w-max origin-top flex-col bg-gray-600 transition duration-200 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
            >
                <a href="/analytics">Analytics</a>
                <a href="/engagement">Engagement</a>
                <a href="/security">Security</a>
                <a href="/integrations">Integrations</a>
            </PopoverPanel>
        </Popover>
    );
}

And here's the UserIcon component that's being used for the PopoverButton:

export default function UserIcon({
    className
}: {
    readonly className?: string | undefined;
}) {
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            className={className ?? "size-6"}
        >
            <path
                fillRule="evenodd"
                d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
                clipRule="evenodd"
            />
        </svg>
    );
}

And finally here's the parent component that contains the Popover component:

import HeaderNavLink from "./header-nav/link";
import UserButton from "./header-nav/user-button";

export default function Header({
    navLinkStrings
}: Readonly<{
    navLinkStrings: readonly string[];
}>) {
    return (
        <header className="flex w-full border-b px-5 py-2 dark:border-gray-400 dark:bg-slate-800">
            <div className="flex w-2/3 justify-end">
                <nav className="flex w-1/2 items-center justify-between">
                    {navLinkStrings.map((navLinkString) => (
                        <HeaderNavLink
                            key={navLinkString}
                            navLinkString={navLinkString}
                        />
                    ))}
                </nav>
            </div>
            <div className="flex grow justify-end">
                <UserButton />
            </div>
        </header>
    );
}

I'm fairly certain I tracked the issue down to the Popover component. When I inspect the element, it shows its dimensions as 40x46. However when I set the Popover display to flex the issues goes away (it correctly fits the contents) and the dimensions get set to 40x40 and when I switch the display to contents that also fixes the issues and the dimensions change to auto x auto. When inspecting the element it doesn't show any margin nor padding, but just in case I also tried explicitly setting padding and margin to 0 and the size and height to auto and fit, but none of that fixed the issue.

When I add different background colors to the Popover and UserIcon (and PopoverButton), you can see that it's the Popover element itself with the incorrect height.

Here's a picture showing the initial Popover height issue with it's display property not manually set to anything and the Popover element with a red background and the contents of the PopoverButton with a green background:

Here's a picture showing the Popover height issue fixed with it's display property set to flex:

And here's a picture showing the Popover height issue fixed with it's display property set to contents:

I don't have a screen cap of the PopoverButton background colored but I confirmed that it's the same size as its contents (the UserIcon component). If this issue does happen to be caused by something I have configured on my end or this is expected and intended behavior of the component then my bad, but I don't believe either of those are the case and this could cause potential layout issues for users of the component as it did for me.

[RobinMalfait]

Hey!

All Headless UI components are headless and don't ship with any styles. The Popover renders a wrapping div (the element you put the relative class on), and then it renders the button as a child. You can reproduce this exact behavior without Headless UI by just using this:

function UserButton() {
  return (
    <div className="relative">
      <button>
        <UserIcon className="size-10 hover:brightness-110" />
      </button>
    </div>
  )
}

Even more simplified in Tailwind Play example: https://play.tailwindcss.com/T712ix6vUU

I don't think there is anything we can do in Headless UI since we don't ship any styles. I also never looked into why the browser behaves this way. I typically use a flexbox container anyway so I would suggest to do the same to solve it 👍

Not a satisfying solution / explanation I'm afraid. But I hope this helps!