Fix the music bar queue popup: broken layout on desktop, unclosable on mobile #17

Merged

kyuno merged 1 commit from fix/music-bar-queue-popup into master

2026-09-16 22:39:09 +02:00

kyuno commented

2026-09-16 22:32:57 +02:00

Owner

Summary

Two reports, same root cause: .musicBarQueue never had a real position on either breakpoint despite its own comment saying it should float above the bar.

Desktop ("cassé"): no position at all → toggling the queue visible just pushed #musicBarPanel (the actual play/pause/skip controls) out of the way in normal flow, growing the fixed bottom bar upward instead of floating a popup over it.
Mobile ("la liste de lecture ne peut pas être fermée"): position: relative (just enough z-index to show above the full-screen now-playing panel) left it sized/placed by normal flow, overlapping the very #toggleQueueBtn used to open it — the only way that existed to close it.

Fix: .musicBar gets position: relative; desktop's .musicBarQueue becomes position: absolute; left: 0; right: 0; bottom: 100% (floats directly above the bar without touching its layout); mobile's becomes position: fixed; inset: 0 (a real full-screen overlay, max-height: none overriding the base rule's 50vh). Also added a dedicated #queueCloseBtn plus a click-outside-closes listener (same pattern as Player.ts's own settingsPanel), so closing it never again depends on where the toggle button happens to render underneath.

Test plan

npm run typecheck (client) — clean
npm run build (client) — clean
No Emby session available here, so verified against a synthetic harness: real compiled CSS + initMusicBar called directly against a reproduction of the real Shell markup.
- Desktop (real 1280px viewport): opening the queue landed its bottom edge exactly on the bar's own top edge (zero gap/overlap) without moving the bar; both the new close button and a click on unrelated page content behind it closed it.
- Mobile (375px-wide <iframe> — this sandbox's resize_window emulation is unreliable): with the now-playing panel opened first, the queue rendered as a genuine full-viewport overlay; elementFromPoint at the close button's own center hit the button itself, not something covering it; closing the queue correctly returned to the still-open now-playing panel.
Not verified against a real Emby session/real device — flagged the same way in docs/architecture.md.

🤖 Generated with Claude Code

## Summary Two reports, same root cause: `.musicBarQueue` never had a real `position` on either breakpoint despite its own comment saying it should float above the bar. - **Desktop ("cassé")**: no `position` at all → toggling the queue visible just pushed `#musicBarPanel` (the actual play/pause/skip controls) out of the way in normal flow, growing the fixed bottom bar upward instead of floating a popup over it. - **Mobile ("la liste de lecture ne peut pas être fermée")**: `position: relative` (just enough z-index to show above the full-screen now-playing panel) left it sized/placed by normal flow, overlapping the very `#toggleQueueBtn` used to open it — the only way that existed to close it. Fix: `.musicBar` gets `position: relative`; desktop's `.musicBarQueue` becomes `position: absolute; left: 0; right: 0; bottom: 100%` (floats directly above the bar without touching its layout); mobile's becomes `position: fixed; inset: 0` (a real full-screen overlay, `max-height: none` overriding the base rule's `50vh`). Also added a dedicated `#queueCloseBtn` plus a click-outside-closes listener (same pattern as `Player.ts`'s own `settingsPanel`), so closing it never again depends on where the toggle button happens to render underneath. ## Test plan - [x] `npm run typecheck` (client) — clean - [x] `npm run build` (client) — clean - [x] No Emby session available here, so verified against a synthetic harness: real compiled CSS + `initMusicBar` called directly against a reproduction of the real Shell markup. - Desktop (real 1280px viewport): opening the queue landed its bottom edge exactly on the bar's own top edge (zero gap/overlap) without moving the bar; both the new close button and a click on unrelated page content behind it closed it. - Mobile (375px-wide `<iframe>` — this sandbox's `resize_window` emulation is unreliable): with the now-playing panel opened first, the queue rendered as a genuine full-viewport overlay; `elementFromPoint` at the close button's own center hit the button itself, not something covering it; closing the queue correctly returned to the still-open now-playing panel. - Not verified against a real Emby session/real device — flagged the same way in docs/architecture.md. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-16 22:32:58 +02:00

Fix the music bar queue popup: broken layout on desktop, unclosable on mobile

Publier l'image Docker / test (pull_request) Failing after 4s

Details

Publier l'image Docker / publish (pull_request) Has been skipped

Details

fc2c4e551f

.musicBarQueue never actually had a position set on desktop despite its
own comment saying it should float above the bar - toggling it visible
just pushed the real controls out of the way instead, growing the
fixed bottom bar upward. Mobile had position: relative with a high
z-index to at least show above the full-screen now-playing panel, but
that left it sized/placed by normal flow, overlapping the very toggle
button used to open it with no other way to close it.

Now: musicBar gets position: relative, desktop musicBarQueue floats
via position: absolute; bottom: 100% without touching the bar's own
layout, and mobile gets a proper position: fixed; inset: 0 overlay.
Also added a dedicated close button plus a click-outside-closes
listener, so closing it never again depends on where the toggle button
happens to render underneath.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

kyuno merged commit 658ad1d01d into master

2026-09-16 22:39:09 +02:00

kyuno deleted branch fix/music-bar-queue-popup

2026-09-16 22:39:09 +02:00

kyuno referenced this pull request from a commit

2026-09-16 22:39:10 +02:00

Merge pull request 'Fix the music bar queue popup: broken layout on desktop, unclosable on mobile' (#17) from fix/music-bar-queue-popup into master

No reviewers

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: kyuno/watchparty#17

No description provided.