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:
parent
8e3c210864
commit
43902fc818
|
|
@ -480,26 +480,23 @@ input {
|
|||
/* ---- phone ------------------------------------------------------------- */
|
||||
|
||||
@media (max-width: 700px) {
|
||||
/* One pane at a time; the topbar tabs switch, as does Tab or a tap on
|
||||
the slim strip the unfocused pane collapses to. */
|
||||
/* One pane at a time, switched by the topbar tabs (or `Tab`). The other
|
||||
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 {
|
||||
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) {
|
||||
grid-template-rows: auto;
|
||||
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;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
.transport {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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
|
||||
by side, so the unfocused one collapses to a title strip (tapping it also
|
||||
switches) and the tabs are how you get back.
|
||||
by side, so only the focused one is rendered and the tabs are the way
|
||||
between them.
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
inset border says only faintly.
|
||||
|
||||
The collapsed strip is the pane's toolbar with everything but the title
|
||||
clipped away, so its buttons were the only thing a tap on it could land on —
|
||||
tapping to switch panes could hit the library's "play" and replace the queue.
|
||||
Those buttons are hidden on the collapsed pane now.
|
||||
The unfocused pane is not rendered at all below that width. It used to
|
||||
collapse to a strip, which was its toolbar and the top of its list with the
|
||||
rest clipped — all still taking taps, so aiming at the strip hit the wrong
|
||||
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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue