cbd-web: drop the collapsed pane strip on phones

The strip was the unfocused pane's toolbar and the top of its list with the
rest clipped away — and clipped rows still take taps, so a tap aimed at the
truncated queue selected a queue entry, and one aimed at the library could
hit its "play" and replace the queue.

Now that the topbar tabs carry the switch, the strip has nothing left to
earn: below 700px only the focused pane is rendered. The pane's inline-end
border goes with it, since there is no second column to divide and
`:last-child` only spares the queue.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Test User 2026-07-27 09:25:49 +02:00
parent 8e3c210864
commit 43902fc818
3 changed files with 19 additions and 21 deletions

View File

@ -480,26 +480,23 @@ input {
/* ---- phone ------------------------------------------------------------- */ /* ---- phone ------------------------------------------------------------- */
@media (max-width: 700px) { @media (max-width: 700px) {
/* One pane at a time; the topbar tabs switch, as does Tab or a tap on /* One pane at a time, switched by the topbar tabs (or `Tab`). The other
the slim strip the unfocused pane collapses to. */ pane is gone rather than collapsed to a strip: a strip is a row of
truncated rows and toolbar buttons that still take taps, so aiming at
it hit the wrong pane's list or its "play". The tabs replace it. */
.panes { .panes {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 1fr auto; grid-template-rows: 1fr;
}
.pane {
/* No second column to divide, so the border would sit on the screen
edge and `:last-child` only spares the queue. */
border-inline-end: none;
} }
.pane:not(.focused) { .pane:not(.focused) {
grid-template-rows: auto; display: none;
max-block-size: 2.4rem;
overflow: hidden;
border-block-start: 1px solid var(--border);
opacity: 0.75;
/* Only the toolbar survives the collapse, so its buttons are all a
tap on the strip can land on and hitting "play" there replaces
the queue when the user meant to switch panes. Leave the title. */
& .toolbar button {
display: none;
}
} }
.transport { .transport {

View File

@ -24,8 +24,8 @@ that point in the track. The `/` live filter is TUI-only for now.
A pair of `library` / `queue` tabs in the top bar switches panes and shows A pair of `library` / `queue` tabs in the top bar switches panes and shows
which one the keys go to — the same thing `Tab` does, reachable without a which one the keys go to — the same thing `Tab` does, reachable without a
keyboard. It matters on a phone: below 700px the two panes cannot sit side keyboard. It matters on a phone: below 700px the two panes cannot sit side
by side, so the unfocused one collapses to a title strip (tapping it also by side, so only the focused one is rendered and the tabs are the way
switches) and the tabs are how you get back. between them.
The volume slider spans the server's whole accepted range, ending at 110% The volume slider spans the server's whole accepted range, ending at 110%
— the server clamps there, so a slider that went further would have a — the server clamps there, so a slider that went further would have a

View File

@ -1620,7 +1620,8 @@ focus. They are shown at every width rather than behind a media query: on
desktop they double as the readout of which pane the keys go to, which the desktop they double as the readout of which pane the keys go to, which the
inset border says only faintly. inset border says only faintly.
The collapsed strip is the pane's toolbar with everything but the title The unfocused pane is not rendered at all below that width. It used to
clipped away, so its buttons were the only thing a tap on it could land on — collapse to a strip, which was its toolbar and the top of its list with the
tapping to switch panes could hit the library's "play" and replace the queue. rest clipped — all still taking taps, so aiming at the strip hit the wrong
Those buttons are hidden on the collapsed pane now. pane's list, or the library's "play", which replaces the queue. With the tabs
carrying the switch, the strip had nothing left to earn.