Ensure anchored components are always rendered in a stacking context

This PR ensures that components with the anchor prop always use the floatingStyles from Floating UI (which contains position: absolute).

This is important, otherwise there is a brief moment where the <ListboxOptions anchor={…} /> (in case of a Listbox) is rendered at the end of the page.

One side effect of this is that this could cause a scrollbar to appear for a moment. But the anchor prop also renders the component in a Modal which does scroll locking (by applying overflow: hidden; to the body).

A side effect of adding overflow: hidden is that the scrollbar is removed. This is nice, but this causes a visual jump when the scrollbar is removed. To counteract this, we also add a padding-right based on the width of the scrollbar to the body to prevent the visual jump.

But because of the brief moment where the scrollbar is visible, we also add a padding-right to the body to prevent the visual jump actually which now causes a visual glitch now. Head scratcher...

Long story short, no more accidental scrollbar appearing for a brief moment.

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 19, 2024 10:59pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 19, 2024 10:59pm

tailwindlabs / headlessui

Ensure anchored components are always rendered in a stacking context #3115