yonlu/yellowjacket
1
1
Fork 0
Code Issues 55 Pull Requests 6 Actions Packages Projects Releases 12 Wiki Activity

Desktop: seek bar shifts width as the elapsed/remaining digits change #13

New Issue
Closed
opened 2026-08-18 05:54:00 +00:00 by logan · 1 comment
logan commented 2026-08-18 05:54:00 +00:00
Collaborator
Copy Link
Copy Source

Report

The seek bar changes size slightly as the numbers in the elapsed/remaining clocks change. Use tabular figures or reserve the space.

Findings

frontend/src/components/audio-player/seekbar/ — the clocks are <small data-testid="elapsed-time"> and the .time-toggle button (~lines 224-248), rendered from formatSeconds. Neither the elements nor their container set font-variant-numeric: tabular-nums or a min-width, so a proportional font reflows the bar every time a digit changes.

Direction

font-variant-numeric: tabular-nums on both clocks, plus a min-width sized from the track's own duration string (a track over an hour is h:mm:ss and legitimately wider). Do not switch the whole app to a monospaced font for this.

**Report** The seek bar changes size slightly as the numbers in the elapsed/remaining clocks change. Use tabular figures or reserve the space. **Findings** `frontend/src/components/audio-player/seekbar/` — the clocks are `<small data-testid="elapsed-time">` and the `.time-toggle` button (~lines 224-248), rendered from `formatSeconds`. Neither the elements nor their container set `font-variant-numeric: tabular-nums` or a min-width, so a proportional font reflows the bar every time a digit changes. **Direction** `font-variant-numeric: tabular-nums` on both clocks, plus a `min-width` sized from the track's own duration string (a track over an hour is `h:mm:ss` and legitimately wider). Do not switch the whole app to a monospaced font for this.
logan added the Area/PlayerKind/BugPlatform/Desktop
Priority
Low
4
Reviewed
Confirmed
1
 labels 2026-08-18 14:36:05 +00:00
logan self-assigned this 2026-08-18 15:03:15 +00:00
yonlu commented 2026-08-18 19:56:51 +00:00
Owner
Copy Link
Copy Source

Shipped in main as d6b48fb — fix(player): stop the seek bar resizing as its clocks count — merged through #83. This was listed in that PR's Closes line but did not close automatically; closing it now.

Shipped in `main` as `d6b48fb` — fix(player): stop the seek bar resizing as its clocks count — merged through #83. This was listed in that PR's `Closes` line but did not close automatically; closing it now.
yonlu closed this issue 2026-08-18 19:56:51 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Area/Design
Area/Downloads
Area/Explore
Area/Library-UI
Area/Metadata
Area/Packaging
Area/Player
Area/Queue
Area/Settings
Area/Shell-Nav
Compat/Breaking
Breaking change that won't be backward compatible
 Kind/Bug
Something is not working
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
 Platform/Android
Platform/Desktop
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Medium
3
The priority is medium
Priority
Low
4
The priority is low
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Won't Fix
3
This issue won't be fixed
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
In Progress
Somebody is actively working on this right now
No labels Area/Player Kind/Bug Platform/Desktop
Priority
Low
4
Reviewed
Confirmed
1
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
logan yonlu
No Assignees logan
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: yonlu/yellowjacket#13