From d324d86e17a1cd54a09a7b17f88c6f1922cfcd9f Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Mon, 30 Mar 2026 20:40:30 -0400
Subject: [PATCH] fix: top releases use compact horizontal cards matching track
 height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switched from square album art grid (each card ~180px tall) to
compact horizontal rows (40px thumbnail left, title+year right).
Each card is ~52px tall — 2 cards at ~110px matches the 5-track
list at ~220px without wasted space. Layout is a vertical flex
column instead of a 2-column grid.
---
 .../explore-artist-details.ts                 | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/explore-artist-details/explore-artist-details.ts b/frontend/src/components/explore-artist-details/explore-artist-details.ts
index 7343282..da02230 100644
--- a/frontend/src/components/explore-artist-details/explore-artist-details.ts
+++ b/frontend/src/components/explore-artist-details/explore-artist-details.ts
@@ -343,18 +343,18 @@ export class ExploreArtistDetails extends LitElement {
             }
 
             .top-releases-grid {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
             }
 
             .top-release-card {
                 display: flex;
-                flex-direction: column;
-                gap: 4px;
+                align-items: center;
+                gap: 10px;
                 cursor: pointer;
                 transition: background 0.15s ease;
-                padding: 4px;
+                padding: 6px 8px;
                 border-radius: 6px;
                 min-width: 0;
             }
@@ -367,14 +367,15 @@ export class ExploreArtistDetails extends LitElement {
             }
 
             .top-release-card:active {
-                transform: scale(0.97);
+                transform: scale(0.98);
             }
 
             .top-release-art {
-                width: 100%;
-                aspect-ratio: 1;
+                width: 40px;
+                height: 40px;
                 border-radius: 4px;
                 overflow: hidden;
+                flex-shrink: 0;
                 background: linear-gradient(
                     135deg,
                     var(--yj-bg-overlay, #404040) 0%,
@@ -406,7 +407,9 @@ export class ExploreArtistDetails extends LitElement {
 
             .top-release-text {
                 min-width: 0;
-                text-align: center;
+                display: flex;
+                flex-direction: column;
+                gap: 1px;
             }
 
             .top-release-title {
@@ -421,7 +424,6 @@ export class ExploreArtistDetails extends LitElement {
             .top-release-meta {
                 display: flex;
                 align-items: center;
-                justify-content: center;
                 gap: 6px;
                 color: var(--yj-text-tertiary, #888);
                 font-size: var(--yj-text-xs);