search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
26.24k stars 1.09k forks source link

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

Open simonedelmann opened 10 months ago

simonedelmann commented 10 months ago

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 Bildschirmfoto 2024-01-27 um 17 06 02 This is a screenshot from the minimal reproduction linked above. The two red bars show, where the 15px offset correction is applied.

Bildschirmfoto_2024-01-27_um_12 12 35 This is a screenshot from the Catalyst docs, where you can also see the padding.

minhviet2002 commented 5 months ago

Have you solved the 15px right padding problem yet?

simonedelmann commented 5 months ago

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.)

abhaykumar01234 commented 4 months ago

I am using @radix-ui/react-scroll-area for my entire application. And I did not need the scroll padding right. How can I fix this?

Also a nice add on would be to add a scroll area which would render the scroll with position absolute, without changing the width off its children like radix does