Fix the music bar mobile now-playing screen not fitting landscape #25

Merged

kyuno merged 1 commit from fix/music-bar-landscape-mobile into master

2026-09-18 15:54:02 +02:00

kyuno commented

2026-09-18 11:44:02 +02:00

Owner

Summary

The album art was sized off min(220px, 60vw) — the viewport dimension a phone in landscape has plenty of — and stayed pinned near that cap regardless of how little vertical room was actually left once everything stacked vertically (art, then text, then transport, then side row). The screen ran well past a typical landscape phone's height and needed to scroll to reach the controls — not adapted to the rotation at all.

Fixed with a dedicated @media (max-width: 720px) and (orientation: landscape) block rather than chasing every fixed value in the portrait rules:

The art moves beside the title/artist instead of above them (.musicBarPanelTrack becomes flex-direction: row), freeing most of the vertical space the portrait layout spends stacking them.
Its size is now capped by vh (min(120px, 20vh)) — the dimension landscape actually constrains — instead of vw.
A few fixed margins shrink alongside it in the same block, same reasoning: adapting to less vertical room, not arbitrary tightening.

Deliberately not changed: .musicBarPlayBig's 56px transport button and the other icon buttons. A touch target's size answers to a finger, not the screen — shrinking it in landscape would trade a real usability problem for a cosmetic one.

Test plan

npm run typecheck/npm run build (client) — clean
Checked directly, not just reasoned about: real compiled CSS + real markup loaded into <iframe>s sized to a wide (700×320) and a deliberately extreme, narrow (650×280) landscape shape (this sandbox's resize_window viewport emulation doesn't reflect orientation reliably). Both matched (orientation: landscape), both switched to a real row layout with the art measurably to the left of the text, both image sizes tracked the shrinking vh cap correctly (64px/56px, not the old fixed 220px), and both fit their entire content within the viewport height with zero overflow — even the extreme 280px-tall case, which the pre-fix numbers would have overflowed by well over 200px.
A separate portrait check (375×700) confirmed this new landscape block changes nothing there — still column, still the original 220px vw-capped art.

🤖 Generated with Claude Code

## Summary The album art was sized off `min(220px, 60vw)` — the viewport dimension a phone in landscape has *plenty* of — and stayed pinned near that cap regardless of how little vertical room was actually left once everything stacked vertically (art, then text, then transport, then side row). The screen ran well past a typical landscape phone's height and needed to scroll to reach the controls — not adapted to the rotation at all. Fixed with a dedicated `@media (max-width: 720px) and (orientation: landscape)` block rather than chasing every fixed value in the portrait rules: - The art moves beside the title/artist instead of above them (`.musicBarPanelTrack` becomes `flex-direction: row`), freeing most of the vertical space the portrait layout spends stacking them. - Its size is now capped by `vh` (`min(120px, 20vh)`) — the dimension landscape actually constrains — instead of `vw`. - A few fixed margins shrink alongside it in the same block, same reasoning: adapting to less vertical room, not arbitrary tightening. **Deliberately not changed**: `.musicBarPlayBig`'s 56px transport button and the other icon buttons. A touch target's size answers to a finger, not the screen — shrinking it in landscape would trade a real usability problem for a cosmetic one. ## Test plan - [x] `npm run typecheck`/`npm run build` (client) — clean - [x] Checked directly, not just reasoned about: real compiled CSS + real markup loaded into `<iframe>`s sized to a wide (700×320) and a deliberately extreme, narrow (650×280) landscape shape (this sandbox's `resize_window` viewport emulation doesn't reflect orientation reliably). Both matched `(orientation: landscape)`, both switched to a real `row` layout with the art measurably to the left of the text, both image sizes tracked the shrinking `vh` cap correctly (64px/56px, not the old fixed 220px), and both fit their entire content within the viewport height with zero overflow — even the extreme 280px-tall case, which the pre-fix numbers would have overflowed by well over 200px. - [x] A separate portrait check (375×700) confirmed this new landscape block changes nothing there — still `column`, still the original 220px `vw`-capped art. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-18 11:44:03 +02:00

Fix the music bar mobile now-playing screen not fitting landscape

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

Details

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

Details

83592f1ee9

The album art was sized off min(220px, 60vw) - the viewport dimension
a phone in landscape has plenty of - and stayed pinned near that cap
regardless of how little vertical room was actually left once
everything stacked vertically (art, text, transport, side), running
well past a typical landscape height and needing to scroll to reach
the controls.

Added a dedicated media query for max-width 720px and orientation
landscape rather than chasing every fixed value in the portrait rules:
the art now sits beside the title/artist instead of above them
(flex-direction: row), freeing most of the vertical space the
portrait layout spends stacking them, and its size is capped by vh
instead of vw - the dimension landscape actually constrains. A few
margins shrink alongside it in the same block for the same reason.
Deliberately left the transport buttons fixed-size - a touch target
answers to a finger, not the screen.

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

kyuno merged commit 076cd7a624 into master

2026-09-18 15:54:02 +02:00

kyuno deleted branch fix/music-bar-landscape-mobile

2026-09-18 15:54:03 +02:00

kyuno referenced this pull request from a commit

2026-09-18 15:54:04 +02:00

Merge pull request 'Fix the music bar mobile now-playing screen not fitting landscape' (#25) from fix/music-bar-landscape-mobile 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#25

No description provided.