Merge pull request 'Fix album track rows collapsing to 3 lines on mobile' (#20) from fix/album-track-row-mobile-width into master

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)

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; }
-}

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 `<iframe>`s at 320px and
+375px - this sandbox's own `resize_window` viewport emulation is
+unreliable, see the mobile-nav/music-UI sections above. At both widths
+every row's index/name/duration/button sat on one line (their vertical
+ranges genuinely overlapping, not just similar by coincidence), left to
+right in that order, with the long names confirmed actually truncated
+(`scrollWidth > clientWidth`) rather than merely happening to fit.
+
 ## Known limitations
 
 - Playback always goes through `hls.js` against whatever Emby's