Dropdowns don't reposition to avoid overflow at a very narrow range when they approach the bottom of their positioned ancestor.

[Aurailus]

Describe the bug

sl-dropdowns are meant to alter the position of the dropdown contents to be above the trigger if there's not enough space to render them without overflow below it. This works most of the time, but there's a narrow range of scroll values where it doesn't correctly flip the dropdown to the top, and instead renders a scrollbar.

To Reproduce

1. Navigate to the Shoelace Dropdown Docs page.
2. Click on a dropdown far enough down on the page that you can scroll up past it.
3. If the dropdown appears above the trigger, scroll down a tiny bit and try again. If it appears below the trigger but with no scrolling, scroll up a tiny bit and try again.
4. Eventually, you'll hit the perfect scroll position where it appears below the trigger but with a scrollbar. You can scroll up and down in fixed increments (e.g. with a mouse-wheel) and see that the problem persists.

Demo

Example in the Shoelace docs:

Example in our company's application:

Browser / OS

• OS: EndeavourOS 2024.01.25 (Linux 6.10.9-arch1-1)
• Browser: Chrome
• Browser version: 128.0.6613.119

Additional information

I've tried this with a custom styled menu as well, and with different distance values as well, and the bug still occurs. It doesn't seem to be tied to any display properties, it just seems to be a problem with computing the required size of the menu.