Fix the music bar progress bar not spanning full width on desktop #19

Merged

kyuno merged 1 commit from fix/music-bar-progress-full-width into master

2026-09-16 22:58:15 +02:00

kyuno commented

2026-09-16 22:56:13 +02:00

Owner

Summary

The other half of "desktop music player is broken," missed by the queue-popup fix — the compact bar's own internal layout was also wrong.

#trackProgress is .musicBarPanel's first child inside its 3-column grid (.musicBarPanelTrack / .musicBarPanelTransport / .musicBarPanelSide), but never had a grid-column of its own. Auto-placement dropped it into column 1 of row 1 like any other item — squeezing it to that column's width and wrapping .musicBarPanelSide onto a second row underneath, instead of spanning the full bar with everything else in one row below it (which .musicBarProgressTrack's own existing comment already described as the intent). Easy to miss with no track loaded, since .musicBarPanelTrack's minimal placeholder content still left column 1 wide enough that the squeeze didn't look obviously broken.

Fix: .musicBarProgressTrack { grid-column: 1 / -1; } — spanning row 1 pushes every sibling after it into row 2 across the full width automatically, no changes needed to any of them.

Test plan

npm run typecheck (client) — clean
npm run build (client) — clean
No Emby session available here, so checked directly: initMusicBar against a synthetic reproduction of the real Shell markup + real compiled CSS, a fake track set so .musicBarPanelTrack has realistic content. getBoundingClientRect() confirmed the progress bar's width exactly matches .musicBarPanel's own content width (not just the viewport), its bottom sits at or above every other row's top, and the other three elements' vertical ranges genuinely overlap each other (not just similar top, which align-items: center legitimately varies by content height) — one shared row below, in the original left-to-right order.

🤖 Generated with Claude Code

## Summary The other half of "desktop music player is broken," missed by the queue-popup fix — the compact bar's own internal layout was also wrong. `#trackProgress` is `.musicBarPanel`'s first child inside its 3-column grid (`.musicBarPanelTrack` / `.musicBarPanelTransport` / `.musicBarPanelSide`), but never had a `grid-column` of its own. Auto-placement dropped it into column 1 of row 1 like any other item — squeezing it to that column's width and wrapping `.musicBarPanelSide` onto a second row underneath, instead of spanning the full bar with everything else in one row below it (which `.musicBarProgressTrack`'s own existing comment already described as the intent). Easy to miss with no track loaded, since `.musicBarPanelTrack`'s minimal placeholder content still left column 1 wide enough that the squeeze didn't look obviously broken. Fix: `.musicBarProgressTrack { grid-column: 1 / -1; }` — spanning row 1 pushes every sibling after it into row 2 across the full width automatically, no changes needed to any of them. ## Test plan - [x] `npm run typecheck` (client) — clean - [x] `npm run build` (client) — clean - [x] No Emby session available here, so checked directly: `initMusicBar` against a synthetic reproduction of the real Shell markup + real compiled CSS, a fake track set so `.musicBarPanelTrack` has realistic content. `getBoundingClientRect()` confirmed the progress bar's width exactly matches `.musicBarPanel`'s own content width (not just the viewport), its bottom sits at or above every other row's top, and the other three elements' vertical ranges genuinely overlap each other (not just similar `top`, which `align-items: center` legitimately varies by content height) — one shared row below, in the original left-to-right order. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-16 22:56:14 +02:00

Fix the music bar progress bar not spanning full width on desktop

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

Details

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

Details

5ceceb262d

trackProgress is musicBarPanel own first child inside a 3-column grid
(track/transport/side), with no grid-column of its own - auto-placement
dropped it into column 1 of row 1 like any other item, squeezing it to
that columns width and wrapping musicBarPanelSide onto a second row
underneath instead of spanning the full bar with everything else in
one row below, as its own comment already said it should. Fixed with
grid-column: 1 / -1, which pushes every sibling after it into row 2
across the full width with no changes needed to any of them.

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

kyuno merged commit 021f272a7d into master

2026-09-16 22:58:15 +02:00

kyuno referenced this pull request from a commit

2026-09-16 22:58:15 +02:00

Merge pull request 'Fix the music bar progress bar not spanning full width on desktop' (#19) from fix/music-bar-progress-full-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#19

No description provided.