fix(mini-player): portal volume popover so it cannot get clipped (#279)

`.mini-player` has `overflow: hidden`, and the absolute-positioned volume
popover (`top: calc(100% + 6px)`, ~150 px tall) was being clipped when the
queue was closed and the mini window was at its short height — visually
the slider rendered outside the visible area, even though it stayed
fully usable. Opening the queue grew the window enough to bring the
popover back inside the clip rect.

Render the popover via `createPortal` to `document.body` and position it
with `position: fixed` based on the trigger button's `getBoundingClientRect`,
mirroring the YearFilterButton pattern. Auto-flips above when there is
not enough room below (short mini windows). Repositions on window
resize / scroll. Outside-click handler now checks both the trigger button
and the popover ref since they no longer share a DOM ancestor.
This commit is contained in:
Frank Stellmacher
2026-04-24 00:02:02 +02:00
committed by GitHub
parent b082f51213
commit 5c87a94170
2 changed files with 70 additions and 15 deletions
+5 -5
View File
@@ -10137,11 +10137,11 @@ html.no-compositing .fs-seekbar-played {
}
.mini-player__volume-popover {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
z-index: 50;
/* Positioned via inline `style` (createPortal'd to document.body, so
`position: fixed` + computed left/top from the trigger button's rect).
Falls back gracefully if inline style is missing. */
position: fixed;
z-index: 99998;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: 8px;