Fix the mini player's crushed layout, square its artwork, add a mini … - #34
Merged
Conversation
…button
The mini window's cover sleeve was a <card>, which stretches to fill its row:
it took 240x120 of a 420-wide row, leaving the metadata column 24px wide. The
title rendered one letter per line and the artist text overflowed to 373px
inside a 102px row. Swap it for a <panel> hugging explicitly-sized art, the
way the LIVE stage's sleeve does, and give the metadata column min-width 0.
The three metadata lines had no wrap/overflow rules, so the artist line still
wrapped past the row once it had width. They elide now. That cost the title's
bold weight and the artist/album ink-vs-muted split: both came from <span>,
and the SDK rejects wrap/overflow on a span paragraph because inline spans
always word-wrap and the paragraph reserves the wrapped height. In a window
fixed at 168pt, a deterministic single line beats the styling — size carries
the hierarchy instead.
The drag strip padded only its leading edge. Per the both-edges rule in
CLAUDE.md the window-control cluster trails on Windows, so EXPAND needed the
{chrome_trailing} spacer too; it is zero on macOS.
Also, per review:
- Artwork is <image>, not <avatar> — avatar renders a disc, and a record
sleeve is square. Same has_cover / initials-tile fallback as the stage.
- Sleeve padding and corner radius come down on both players (stage 12 -> 5,
mini 6 -> 3, both radius -> sm) so the frame reads as a hairline.
- New masthead button toggles mini mode, using a new app:mini
picture-in-picture glyph; the builtin icon set has nothing for it.
- The back panel's gear becomes panel-right: `settings` read as
preferences-only, but the panel is SHOWS/TIMELINE/BOOTH/REQUEST as well,
and it opens as a right-hand column.
The masthead button makes the "shortcut is the only way into mini mode"
comment in main.zig and the README's mini bullet stale; both updated.
native test passes; both windows verified against the running app.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…button
The mini window's cover sleeve was a , which stretches to fill its row: it took 240x120 of a 420-wide row, leaving the metadata column 24px wide. The title rendered one letter per line and the artist text overflowed to 373px inside a 102px row. Swap it for a hugging explicitly-sized art, the way the LIVE stage's sleeve does, and give the metadata column min-width 0.
The three metadata lines had no wrap/overflow rules, so the artist line still wrapped past the row once it had width. They elide now. That cost the title's bold weight and the artist/album ink-vs-muted split: both came from , and the SDK rejects wrap/overflow on a span paragraph because inline spans always word-wrap and the paragraph reserves the wrapped height. In a window fixed at 168pt, a deterministic single line beats the styling — size carries the hierarchy instead.
The drag strip padded only its leading edge. Per the both-edges rule in CLAUDE.md the window-control cluster trails on Windows, so EXPAND needed the {chrome_trailing} spacer too; it is zero on macOS.
Also, per review:
settingsread as preferences-only, but the panel is SHOWS/TIMELINE/BOOTH/REQUEST as well, and it opens as a right-hand column.The masthead button makes the "shortcut is the only way into mini mode" comment in main.zig and the README's mini bullet stale; both updated.
native test passes; both windows verified against the running app.