yonlu/yellowjacket
1
1
Fork 0
Code Issues 53 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Explore: rows cannot be scrolled with a plain mouse, and album cards come in different sizes #264

New Issue
Closed
opened 2026-09-26 20:58:35 +00:00 by yonlu · 1 comment
yonlu commented 2026-09-26 20:58:35 +00:00
Owner
Copy Link
Copy Source

The Explore page's cards and rows need a pass. This issue covers work that was already done in a local tree without an issue, and is filed now so it has one.

Problems

  • Sideways rows can't be scrolled with most mice. The shelves, the top results, and the artist page's discography and similar-artists rows scroll sideways only with a horizontal wheel or a trackpad. A mouse with neither cannot reach the cards past the fold.
  • Album cards are different sizes. explore-view clamped them to 130–150px and the artwork is square, so cards in one row had different widths and different heights. explore-artist-details carried a second copy of the same rules.
  • Non-square covers are cropped. The artwork uses object-fit: cover, so a cover that isn't square loses its edges.
  • Unowned cards look like a failed load. A grid of dimmed cards reads as a page that didn't load, not as a page of things you can ask for.
  • The "one album owned" row is a second leaderboard. "More from artists you own one album by" is ordered by popularity, so the same few big names appear on every visit.

Direction

  • A shared <scroll-row> with previous/next arrows. They reveal on hover and are always visible where the device has no hover.
  • One albumCardStyles:
    • a fixed card width, with each line under the art reserving its own space;
    • object-fit: contain;
    • the ownership badge over the artwork for owned and unowned alike, and no dimming. The album page's tracklist keeps dimming its unowned rows.
  • The singly-owned-artist shelf samples with RANDOM().
  • MusicBrainz links go through one helper that pins the origin.
The Explore page's cards and rows need a pass. This issue covers work that was already done in a local tree without an issue, and is filed now so it has one. ## Problems - **Sideways rows can't be scrolled with most mice.** The shelves, the top results, and the artist page's discography and similar-artists rows scroll sideways only with a horizontal wheel or a trackpad. A mouse with neither cannot reach the cards past the fold. - **Album cards are different sizes.** `explore-view` clamped them to 130–150px and the artwork is square, so cards in one row had different widths and different heights. `explore-artist-details` carried a second copy of the same rules. - **Non-square covers are cropped.** The artwork uses `object-fit: cover`, so a cover that isn't square loses its edges. - **Unowned cards look like a failed load.** A grid of dimmed cards reads as a page that didn't load, not as a page of things you can ask for. - **The "one album owned" row is a second leaderboard.** "More from artists you own one album by" is ordered by popularity, so the same few big names appear on every visit. ## Direction - A shared `<scroll-row>` with previous/next arrows. They reveal on hover and are always visible where the device has no hover. - One `albumCardStyles`: - a fixed card width, with each line under the art reserving its own space; - `object-fit: contain`; - the ownership badge over the artwork for owned and unowned alike, and no dimming. The album page's tracklist keeps dimming its unowned rows. - The singly-owned-artist shelf samples with `RANDOM()`. - MusicBrainz links go through one helper that pins the origin.
yonlu self-assigned this 2026-09-26 20:58:56 +00:00
yonlu added the
Status
In Progress
 label 2026-09-26 20:58:56 +00:00
yonlu commented 2026-09-26 20:58:57 +00:00
Author
Owner
Copy Link
Copy Source

Taking this on feat/264-explore-cards. The work was already done in a local tree, and this issue exists so it has one. It lands as two commits: the shelf sampling (backend) and the cards/rows (frontend). I also bundled the missing chevron-left icon (the scroll-row's left arrow would otherwise have drawn the fallback glyph) and moved the last raw window.open MusicBrainz link onto the new helper.

Taking this on `feat/264-explore-cards`. The work was already done in a local tree, and this issue exists so it has one. It lands as two commits: the shelf sampling (backend) and the cards/rows (frontend). I also bundled the missing `chevron-left` icon (the scroll-row's left arrow would otherwise have drawn the fallback glyph) and moved the last raw `window.open` MusicBrainz link onto the new helper.
yonlu closed this issue 2026-09-27 01:45:21 +00:00
gitea-actions bot removed the
Status
In Progress
 label 2026-09-27 01:46:41 +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/Explore Kind/Enhancement Platform/Android Platform/Desktop
Priority
Medium
3
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
logan yonlu
No Assignees yonlu
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: yonlu/yellowjacket#264