fix(tracks): RC3 layout regressions + multi-artist links (#976)

* fix(tracks): RC3 layout regressions + multi-artist links

- Restore vertical rhythm on the Tracks hub: the header/hero/rails/browse
  sections sat two wrapper divs below .tracks-page so its flex gap never
  reached them and they collapsed together. New .tracks-hub-stack re-applies
  the gap, fixing the tagline-touching-hero and Random-Pick-overlapping-hero
  spacing (the rail's nav buttons no longer ride into the box above).
- Stop the sticky browse-table header going transparent on hover: its base
  background became opaque but the :hover rule still forced transparent, so
  rows bled through. Header now keeps its card background on hover.
- Widen the Duration column (56px -> 72px; 56 -> 64 on mobile) so the
  "DURATION" header no longer clips/overruns.
- Split multi-artist tracks into individually clickable artist links in both
  the "Track of the moment" hero and the browse list rows (OpenSubsonic
  artists[] with single-artist fallback), matching the album tracklist.

* docs(changelog): Tracks RC3 spacing, Duration, header hover, multi-artist (#976)
This commit is contained in:
Frank Stellmacher
2026-06-04 02:28:13 +02:00
committed by GitHub
parent 908c349cfd
commit 88df194808
8 changed files with 64 additions and 19 deletions
+10
View File
@@ -9,6 +9,16 @@
padding-bottom: var(--space-8, 2rem);
}
/* The hub sections (header, hero, rails, browse list) live two wrapper divs
deep inside .tracks-page, so the page-level flex gap never reached them and
the sections collapsed together. This stack restores even vertical rhythm
between them. */
.tracks-hub-stack {
display: flex;
flex-direction: column;
gap: var(--space-6, 1.5rem);
}
.tracks-header {
display: flex;
align-items: flex-end;
+2 -2
View File
@@ -18,11 +18,11 @@
}
.song-list-row {
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 56px;
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 64px;
}
.song-list-row--with-bpm {
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 48px 56px;
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) 48px 64px;
}
.song-list-row-cell:nth-child(4), /* album */
@@ -2,7 +2,7 @@
.song-list-row {
display: grid;
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 56px;
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 72px;
gap: var(--space-3);
align-items: center;
height: 52px;
@@ -43,8 +43,11 @@
border-bottom: 1px solid var(--border-subtle);
}
/* Header is sticky and opaque — keep its card background on hover so the
generic .song-list-row:hover rule doesn't turn it transparent (which let
rows scrolling underneath bleed through). */
.song-list-row--header:hover {
background: transparent;
background: var(--bg-card);
}
.song-list-row-cell {
@@ -75,7 +78,7 @@
}
.song-list-row--with-bpm {
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 48px 56px;
grid-template-columns: 64px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px 48px 72px;
}
.song-list-row-bpm {
-1
View File
@@ -4,7 +4,6 @@
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-2);
}
.virtual-song-list-title {