Update flux.css to fix error of dropdown

[fdteam-deanie]

Fix error that the scroll bar of the page is disappeared and screen width is increased which will break the page layout when click at a dropdown element or a <select> element.

The scenario

1. Prepare a dropdown like avatar:

<flux:select variant="listbox" label="Assign to"> <flux:select.option selected> <div class="flex items-center gap-2 whitespace-nowrap"> <flux:avatar circle size="xs" src="https://unavatar.io/github/calebporzio" /> Caleb Porzio </div> </flux:select.option> </flux:select>

2. Make sure your page has content that need to scroll (or you can zoom it in until scroll bar appears).

3. Click the dropdown or any selectable element, then you see the scroll bar of the page (usually on the right side) disappear and all your page's elements "jump" to the right.

The problem

• Scroll bar is disappeared and screen width is increased which will break the layout when click at dropdown or a select element.
• Reported at opening dropdowns and modals make right fixed elements jump #1891.
• Video of the error before apply PR:

after.mov

The solution

• Override css to ensure Flux dropdowns are not clipped by page container scroll with "important" and prevent layout shift when Flux unlocks body scroll (avoid padding compensation).
• Video of successfully fixed after apply PR:

before.mov

Fixes livewire/flux#