Fix album track rows collapsing to 3 lines on mobile #20

Merged

kyuno merged 1 commit from fix/album-track-row-mobile-width into master

2026-09-16 23:40:26 +02:00

kyuno commented

2026-09-16 23:18:35 +02:00

Owner

Summary

trackList.css's @media (max-width: 600px) forced .trackRow down to a 2-column grid and pinned both .trackDuration and the icon button to that same second column — auto-placement then stacked them into their own rows under the track name (3 rows total) instead of staying on one line.
The numbers don't support this ever being needed: .trackRow's fixed overhead (28px index + gaps + padding + an auto-sized duration/button) comes to roughly 155-165px, and even a 320px-wide phone leaves comfortably more than that for the flexible name column — .trackName's existing text-overflow: ellipsis already handles anything longer.
Removed the breakpoint outright rather than tuning it.

Test plan

npm run typecheck (client) — clean
npm run build (client) — clean
Checked directly, not assumed: real compiled CSS, several .trackRows (short and deliberately overlong names) loaded into <iframe>s at 320px and 375px (this sandbox's resize_window emulation is unreliable). At both widths every row's index/name/duration/button sat on one line (genuinely overlapping vertical ranges, left to right in order), and the long names were confirmed actually truncated (scrollWidth > clientWidth) rather than just happening to fit.

🤖 Generated with Claude Code

## Summary - `trackList.css`'s `@media (max-width: 600px)` forced `.trackRow` down to a 2-column grid and pinned both `.trackDuration` and the icon button to that same second column — auto-placement then stacked them into their own rows under the track name (3 rows total) instead of staying on one line. - The numbers don't support this ever being needed: `.trackRow`'s fixed overhead (28px index + gaps + padding + an `auto`-sized duration/button) comes to roughly 155-165px, and even a 320px-wide phone leaves comfortably more than that for the flexible name column — `.trackName`'s existing `text-overflow: ellipsis` already handles anything longer. - Removed the breakpoint outright rather than tuning it. ## Test plan - [x] `npm run typecheck` (client) — clean - [x] `npm run build` (client) — clean - [x] Checked directly, not assumed: real compiled CSS, several `.trackRow`s (short and deliberately overlong names) loaded into `<iframe>`s at 320px and 375px (this sandbox's `resize_window` emulation is unreliable). At both widths every row's index/name/duration/button sat on one line (genuinely overlapping vertical ranges, left to right in order), and the long names were confirmed actually truncated (`scrollWidth > clientWidth`) rather than just happening to fit. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-16 23:18:35 +02:00

Fix album track rows collapsing to 3 lines on mobile

Publier l'image Docker / test (pull_request) Failing after 4s

Details

Publier l'image Docker / publish (pull_request) Has been skipped

Details

c12e34e1e7

trackList.css forced .trackRow down to 2 columns under 600px and
pinned duration + the icon button both to column 2 - auto-placement
then stacked them into their own rows under the track name instead of
staying on one line. The fixed overhead (index/gaps/padding/an
auto-sized duration and button) comes to roughly 155-165px, and even a
320px-wide phone leaves comfortably more than that for the flexible
name column - .trackName already ellipsizes, so the breakpoint was
solving a problem that did not exist. Removed outright.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

kyuno merged commit e9e288c93c into master

2026-09-16 23:40:26 +02:00

kyuno deleted branch fix/album-track-row-mobile-width

2026-09-16 23:40:26 +02:00

kyuno referenced this pull request from a commit

2026-09-16 23:40:27 +02:00

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

No reviewers

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: kyuno/watchparty#20

No description provided.