fix(dropdown): flip-up menu must override top-[105%] class

The flip-up branch cleared inline `top` to "", which let the menu's
`top-[105%]` utility class reassert top:105% on the now-fixed element —
collapsing the menu to a 2px sliver below the viewport, so toggles near the
viewport bottom appeared not to open. Set the unused anchor to "auto" so the
inline value wins over the class. Add an e2e regression for the flip-up path.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-20 23:47:46 +02:00
parent 3bd14e8c89
commit 184749bf6d
2 changed files with 58 additions and 2 deletions
+5 -2
View File
@@ -33,11 +33,14 @@ export function initDropdown(host: HTMLElement, config: DropdownConfig): void {
menu.style.width = `${rect.width}px`;
menu.style.maxHeight = `${Math.max(0, openUp ? spaceAbove : spaceBelow)}px`;
menu.style.overflowY = "auto";
// Set the unused anchor to "auto" (not "") so this inline value overrides
// the menu's `top-[105%]` utility class; clearing it to "" would let the
// class reassert top:105% and collapse the fixed menu off-screen.
if (openUp) {
menu.style.top = "";
menu.style.top = "auto";
menu.style.bottom = `${window.innerHeight - rect.top}px`;
} else {
menu.style.bottom = "";
menu.style.bottom = "auto";
menu.style.top = `${rect.bottom}px`;
}
};