diff --git a/README.md b/README.md index 7fe05fa..e59deb5 100644 --- a/README.md +++ b/README.md @@ -386,6 +386,9 @@ Then put it behind your existing reverse proxy like everything else was missing a grid-column span, so it (and not just the queue popup above) was still squeezed and wrapping controls onto a second row — see docs/architecture.md +- [x] Fixed an album's track rows collapsing to 3 lines on mobile — + there was always room for one, the breakpoint just assumed + otherwise — see docs/architecture.md - [ ] Try a full party end-to-end with two real accounts (still the main gap) - [ ] Try casting to a real Chromecast (only the SDK's own bootstrap is confirmed here — no real device/session) diff --git a/client/src/styles/trackList.css b/client/src/styles/trackList.css index 235c67f..046ba7a 100644 --- a/client/src/styles/trackList.css +++ b/client/src/styles/trackList.css @@ -42,8 +42,3 @@ .trackRow button.trackIconBtn:hover { border-color: var(--text); color: var(--text); background: none; } .trackRow button.trackIconBtn svg { width: 12px; height: 12px; } - -@media (max-width: 600px) { - .trackRow { grid-template-columns: 24px 1fr; } - .trackRow .trackDuration, .trackRow button { grid-column: 2; justify-self: start; } -} diff --git a/docs/architecture.md b/docs/architecture.md index e3375d8..3edee18 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -4237,6 +4237,35 @@ which `align-items: center` legitimately varies by each one's own content height) - confirming one shared row below, in the original track/transport/side left-to-right order. +## An album's track rows collapsed to 3 lines on mobile for no reason + +Reported directly: there was room to fit an album's track rows +(index/name/duration/a small play-or-queue button) on one line on +mobile, but `trackList.css`'s own `@media (max-width: 600px)` forced +`.trackRow` down to a 2-column grid and pinned both `.trackDuration` +and the button to that same second column - auto-placement then +stacked the two of them into their own rows underneath the track name, +three rows total instead of one. + +Removed outright rather than tuned - the numbers don't support it +having ever been needed. `.trackRow`'s fixed overhead (28px index + +2×12px gaps + `auto`-sized duration/button + `12px` horizontal padding) +comes to roughly 155-165px, and even the narrowest common phone width +(320px) leaves comfortably more than that for `.mainContent`'s own +side padding plus a `1fr` name column - `.trackName`'s existing +`text-overflow: ellipsis` was already doing exactly the job this +breakpoint assumed it couldn't. + +Verified: full `typecheck`/`build` (client only). Checked directly, not +assumed: real compiled CSS, a handful of `.trackRow`s (short and +deliberately overlong names) loaded into two `