diff --git a/web/src/app/design.css b/web/src/app/design.css index 7d7e992..9bad9ce 100644 --- a/web/src/app/design.css +++ b/web/src/app/design.css @@ -287,16 +287,19 @@ nav.contents .sep { flex: 1; } .edit-meta { display: flex; flex-direction: column; gap: 8px; width: 100%; } .rmeta.why { font-style: italic; color: var(--graphite); margin-top: 2px; } -/* Discover unified row: artist block | inline album thumbnails | actions */ -.disco-row { align-items: flex-start; flex-wrap: wrap; gap: 14px; } -.disco-row .main { flex: 1 1 180px; } -.disco-albums { display: flex; gap: 12px; flex-wrap: wrap; } -.disco-album { display: flex; flex-direction: column; gap: 4px; width: 92px; } -.disco-thumb { display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } -.disco-thumb .thumb { width: 92px; height: 92px; } -.disco-album .da-title { font-size: 12px; line-height: 1.2; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } -.disco-album .badge { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--graphite); } -.disco-album .btn.sm { padding: 2px 8px; } +/* Discover unified row: artist block | compact album list (stacked) | actions. + Each album is a small horizontal item (cover + title/badge on one line) so two stack + vertically without making the row taller than the artist block. */ +.disco-row { align-items: center; flex-wrap: wrap; gap: 14px 20px; } +.disco-row .main { flex: 1 1 200px; } +.disco-albums { display: flex; flex-direction: column; gap: 6px; flex: 0 1 300px; min-width: 220px; } +.disco-album { display: flex; align-items: center; gap: 8px; } +.disco-thumb { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } +.disco-thumb .da-cover { width: 30px; height: 30px; flex-shrink: 0; } +.da-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } +.disco-album .da-title { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.disco-album .badge { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--graphite); } +.disco-album .btn.sm.want { padding: 1px 8px; flex-shrink: 0; } .sel-tools { display: inline-flex; align-items: center; gap: 10px; } .bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; padding: 8px 12px; border: 1px solid var(--rule); background: var(--paper-2); } .album-card { position: relative; } diff --git a/web/src/app/discover/discover-client.tsx b/web/src/app/discover/discover-client.tsx index 94ef3e9..46012ba 100644 --- a/web/src/app/discover/discover-client.tsx +++ b/web/src/app/discover/discover-client.tsx @@ -239,11 +239,13 @@ export function DiscoverClient() { onClick={() => setAlbumModal({ a, artistName: row.artistName, artistMbid: row.artistMbid })} aria-label={`Open ${a.album ?? ""}`} > - - {a.album} - {badgeFor(a.albumReason) ? {badgeFor(a.albumReason)} : null} + + + {a.album} + {badgeFor(a.albumReason) ? {badgeFor(a.albumReason)} : null} + -