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

Desktop: the Tracks list looks like a spreadsheet, and horizontal scrolling is unusable #30

New Issue
Open
opened 2026-08-18 05:56:10 +00:00 by logan · 0 comments
logan commented 2026-08-18 05:56:10 +00:00
Collaborator
Copy Link
Copy Source

Report

The grid lines on the Tracks tab give it an ugly spreadsheet look — remove them, hide them better, or make them prettier. Separately, horizontal scrolling in that list feels impossible.

Findings

  • frontend/src/components/track-list/track-list.ts draws border-bottom rules on rows and the header (~lines 1036, 1121) and a 4px transparent bottom border on the resize/drop indicator (~1201).
  • Horizontal scrolling: computeDefaultWidths shares out the host's clientWidth minus the favourite column (24px) and the row padding (2x8px) — the columns are fitted to the viewport by construction, so there is nothing to scroll to and a column that needs more room is squeezed instead. body is overflow-x: auto but the list itself is not a horizontal scroller.

Direction

Two separable pieces:

  1. Visual: drop the vertical/row rules in favour of row hover + zebra-free spacing, keeping a single subtle header rule. Note the playing row's ::before marker lives in the row's own left padding — do not disturb it.
  2. Structural: decide whether the track list is fit-to-width (current) or a real horizontal scroller with per-column minimums. If the latter, the header must scroll in lockstep with the virtualized body, and the phone column set (PHONE_COLUMN_IDS) is unaffected.
**Report** The grid lines on the Tracks tab give it an ugly spreadsheet look — remove them, hide them better, or make them prettier. Separately, horizontal scrolling in that list feels impossible. **Findings** - `frontend/src/components/track-list/track-list.ts` draws `border-bottom` rules on rows and the header (~lines 1036, 1121) and a 4px transparent bottom border on the resize/drop indicator (~1201). - Horizontal scrolling: `computeDefaultWidths` shares out the host's `clientWidth` minus the favourite column (24px) and the row padding (2x8px) — the columns are fitted to the viewport by construction, so there is nothing to scroll to and a column that needs more room is squeezed instead. `body` is `overflow-x: auto` but the list itself is not a horizontal scroller. **Direction** Two separable pieces: 1. Visual: drop the vertical/row rules in favour of row hover + zebra-free spacing, keeping a single subtle header rule. Note the playing row's `::before` marker lives in the row's own left padding — do not disturb it. 2. Structural: decide whether the track list is fit-to-width (current) or a real horizontal scroller with per-column minimums. If the latter, the header must scroll in lockstep with the virtualized body, and the phone column set (`PHONE_COLUMN_IDS`) is unaffected.
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/Library-UI Kind/Enhancement Platform/Desktop
Priority
Medium
3
Reviewed
Confirmed
1
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
logan yonlu
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: yonlu/yellowjacket#30