(v2.0.0-alpha.4) Listbox: Scrollbar offset correction issues

[simonedelmann]

What package within Headless UI are you using?

@headlessui/react@2.0.0-alpha.4

What browser are you using?

Chrome + Safari

Reproduction URL

https://github.com/simonedelmann/headlessui-demo

Describe your issue

If HeadlessUI opens a listbox/dropdown/etc., there are two styles applied to the body: overflow: hidden; padding-right: 15px overflow: hidden; removes the scrollbar, so there is a padding applied, which is calculated by the scrollbar's width. This should avoid shifts in the layout due to the missing scrollbar.

I have two issues with this:

Issue 1: Scrollbar offset if height is exactly 100vh

If the page's height exactly equals the inner height of the browser window (e.g. Tailwind class min-h-screen), there is no scrollbar shown. (There is nothing to scroll obviously.) But padding-right: 15px is still applied.

(If the page's height is smaller than the browser window, there is padding-right: 0px applied instead. This should also be the case for page height = browser height.)

Issue 2: ListboxOptions also gets scrollbar offset

If ListboxOptions has the class overflow-y-scroll (see here), the same 15px scrollbar offset will be added to ListboxOptions, even though there never was any scrollbar at all.

This happens especially when using the Catalyst UI Listbox component. I also have this issue on https://catalyst.tailwindui.com

Screenshots This is a screenshot from the minimal reproduction linked above. The two red bars show, where the 15px offset correction is applied.

This is a screenshot from the Catalyst docs, where you can also see the padding.

[minhviet2002]

Have you solved the 15px right padding problem yet?

[simonedelmann]

I stopped using HeadlessUI (and Catalyst), because I couldn't figure out a good way to use TanStack Router with it's href props. (I then switched to ShadcnUI, which uses Radix Slots instead.)