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

fix: top releases height synced to track list via shared CSS grid row

Browse Source 
The parent is now a 2-column CSS grid with grid-template-rows:
auto 1fr. Headers go in row 1 (auto). Track list and releases
grid go in row 2 (1fr). The track list's natural height defines
row 2's height. The releases grid stretches to match via
align-self:stretch.

Inside the releases grid, cards use flex:1 on the art container
so album art fills available height (with object-fit:cover for
non-square crops). The art is no longer aspect-ratio:1 — it
adapts to whatever height the track list provides.

This guarantees both columns are always the same height regardless
of track count or release count.
This commit is contained in:
yonlu
2026-03-30 20:51:47 -04:00
parent 7b5ef26f52
commit 27da6d2424
1 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/explore-artist-details/explore-artist-details.ts
+60 -43
View File
@@ -334,18 +334,39 @@ export class ExploreArtistDetails extends LitElement {
.top-section-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
grid-template-rows: auto 1fr;
gap: 0 24px;
}
.top-section-column {
min-width: 0;
display: contents;
}
.section-header-tracks {
grid-column: 1;
grid-row: 1;
}
.section-header-releases {
grid-column: 2;
grid-row: 1;
}
.track-list-container {
grid-column: 1;
grid-row: 2;
}
.top-releases-grid {
grid-column: 2;
grid-row: 2;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 8px;
justify-items: center;
align-self: stretch;
overflow: hidden;
}
.top-release-card {
@@ -358,7 +379,8 @@ export class ExploreArtistDetails extends LitElement {
padding: 4px;
border-radius: 6px;
min-width: 0;
width: 100%;
min-height: 0;
overflow: hidden;
}
.top-release-card:hover {
@@ -374,7 +396,8 @@ export class ExploreArtistDetails extends LitElement {
.top-release-art {
width: 100%;
aspect-ratio: 1;
flex: 1;
min-height: 0;
border-radius: 4px;
overflow: hidden;
background: linear-gradient(
@@ -1292,57 +1315,51 @@ export class ExploreArtistDetails extends LitElement {
<div class="top-section-columns">
${hasTracks
? html`
<div class="top-section-column">
<h3 class="section-header">Top Tracks</h3>
<div class="track-list">
${tracks.map(
(t, i) => html`
<div class="track-item">
<span class="track-rank"
>${i + 1}</span
<h3 class="section-header section-header-tracks">Top Tracks</h3>
<div class="track-list track-list-container">
${tracks.map(
(t, i) => html`
<div class="track-item">
<span class="track-rank"
>${i + 1}</span
>
<div class="track-info">
<div
class="track-title"
>
<div class="track-info">
<div
class="track-title"
>
${t.trackName}
</div>
<div
class="track-artist"
>
${t.artistName}
</div>
${t.trackName}
</div>
<div
class="track-artist"
>
${t.artistName}
</div>
<span class="track-listens">
${formatListenCount(
t.totalListenCount,
)}
plays
</span>
</div>
`,
)}
</div>
<span class="track-listens">
${formatListenCount(
t.totalListenCount,
)}
plays
</span>
</div>
`,
)}
</div>
`
: nothing}
${hasReleases
? html`
<div class="top-section-column">
<h3 class="section-header">Top Releases</h3>
<div class="top-releases-grid">
${releases.map((rg) =>
this.renderTopReleaseCard(rg),
)}
</div>
<h3 class="section-header section-header-releases">Top Releases</h3>
<div class="top-releases-grid">
${releases.map((rg) =>
this.renderTopReleaseCard(rg),
)}
</div>
`
: releasesLoading
? html`
<div class="top-section-column">
<h3 class="section-header">Top Releases</h3>
<div class="section-loading">Loading\u2026</div>
</div>
<h3 class="section-header section-header-releases">Top Releases</h3>
<div class="section-loading" style="grid-column:2;grid-row:2">Loading\u2026</div>
`
: nothing}
</div>