Floating bottomsheet (modal) max-width doesn't respect scrollbars

[bbredewold]

Flux version

v2.12.2

Livewire version

v3.7.11

Tailwind version

v4.1.13

Browser and Operating System

Firefox, MacOS

What is the problem?

When the modal variant is set to 'bottom', this CSS is applied:

'bottom' => 'fixed m-0 p-8 min-w-[100vw] overflow-y-auto mt-auto [--flux-flyout-translate:translateY(50px)] border-t'

Problem is, that the width calculation (100vw) is not respecting the scrollbars when present. Because of that, the optical alignment of the modal is a bit off.

I've overridden the calculation with min-w-[calc(100vw-(100vw-100%))]! to make it work nicely with page with and without scrollbars (or stable gutters).

Code snippets to replicate the problem

<flux:modal flyout position="bottom">
  // Make sure the flyout is shown on a page that has scrollbars.
</flux:modal>

Screenshots/ screen recordings of the problem

How do you expect it to work?

Make the width fill the available space, not the window space.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.