headlessui

Files

T

Robin Malfait 7344846fad Improve "Scroll lock" scrollbar width for Dialog component (#1457 )

* improve scroll lock, scrollbarWidth

The idea is as follow:
If you currently have a scrollbar, and you open a Dialog then we enable
a "Scroll lock" so that you can't scroll in the background behind the
modal. We can achieve this by adding a `overflow: hidden;` to the
`html`.

The issue is that by doing this, we lose the scrollbar and therefore the
page will jump to right because now there is a bit more room.

To account for this, we set a `padding-right` on the `html` of the
scrollbarWidth in pixels. This counteracts the visual jump you would
see.

The issue with this approach is that there could *still* be a scrollbar
once we add the `overflow: hidden`. This can happen if you use new css
features like the `scrollbar-gutter: stable;`.

To take this into account, we will measure the scrollbar again after we
set the `overflow: hidden`. Now we will only apply that counteracting
offset if there would actually be a jump by measuring the before and
after widths and applying the diff if there is one.

* update changelog

2022-05-16 12:47:19 +02:00

build

improve build files

2022-01-31 00:10:06 +01:00

src

Improve "Scroll lock" scrollbar width for Dialog component (#1457 )

2022-05-16 12:47:19 +02:00

types

Improve overal codebase, use modern tech like esbuild and TypeScript 4! (#1055 )

2022-01-27 17:07:38 +01:00

jest.config.cjs

convert .js to .cjs