fix(queue): overlay the content instead of taking its width

The panel is flex-shrink: 0 in the flow of .content-area, so an open
queue was paid for by the main panel rather than covering it. Measured
on Playlists: 379px of content left at 900x600 with all three of the
page header's actions clipped, 69px at 390px, and 0px at 320px — where
the content was not degraded but gone.

It goes to an overlay with a scrim when the content cannot spare the
width, and the rule is computed rather than breakpointed:
`available - panelWidth < 480`, where available is .content-area's
width and so already accounts for the sidebar's collapse at 900. A
media query cannot express this, which is the reason for the property:
the panel is drag-resizable between 200 and 500px and persisted, so a
viewport breakpoint silently assumes the default 320 and is wrong by up
to 180px for a user who widened it — in the direction that hurts, since
a wider queue is exactly when the content can least afford it.

480 is a judgement and the comment says so: there is no cliff to derive
it from (the track list rescales continuously, 213px to 124px columns
with no row overflow), so it is anchored to keep the default 1100px
window inline while putting every measured-broken case on the overlay
side.

The overlay is a presentation and not a fork — #55 asks for one
component with two mount points — so the roving tab stop, Alt+Arrow
reorder, drag reorder and selection semantics are untouched. Escape
closes it and returns focus, attached only while the overlay is up: it
is a dismissal rather than a shortcut, which is why it is not a
panel-scoped binding. The scrim covers the content area only, not the
sidebar or the transport, because the queue is not modal.

Refs #24

This commit is contained in:

logan

2026-08-19 10:41:00 -04:00

parent cee43e53ac

commit 637bb611f8

4 changed files with 610 additions and 0 deletions

									
										frontend/index.css
									
		+8
		
												View File
												
				@@ -231,6 +231,14 @@ body div.sidebar {

				    display: flex;

				    overflow: hidden;

				    contain: layout style;

				    /* The containing block for the queue panel's overlay mode (plan

				       018, #24), which spans this box rather than taking width from

				       the main panel beside it. `contain: layout` already establishes

				       one; this says so on purpose, so that removing the containment

				       for a paint reason does not silently reparent the overlay to the

				       viewport. */

				    position: relative;

				}

				.main-panel {