fix: top release cards fill grid cells, art centered with text below

Removed max-height/max-width constraints — art fills the grid
cell width naturally. Cards are centered in their cells via
justify-items:center and align-items:center on the card itself.
Text sits centered below the art. The 2-column grid cells size
based on the available column width, so art scales with the
layout rather than being fixed at 80px.
This commit is contained in:
2026-03-30 20:47:35 -04:00
parent 15e34284dd
commit 7b5ef26f52
@@ -335,7 +335,6 @@ export class ExploreArtistDetails extends LitElement {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 24px; gap: 24px;
align-items: start;
} }
.top-section-column { .top-section-column {
@@ -346,17 +345,20 @@ export class ExploreArtistDetails extends LitElement {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 8px;
justify-items: center;
} }
.top-release-card { .top-release-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
gap: 4px; gap: 4px;
cursor: pointer; cursor: pointer;
transition: background 0.15s ease; transition: background 0.15s ease;
padding: 4px; padding: 4px;
border-radius: 6px; border-radius: 6px;
min-width: 0; min-width: 0;
width: 100%;
} }
.top-release-card:hover { .top-release-card:hover {
@@ -373,8 +375,6 @@ export class ExploreArtistDetails extends LitElement {
.top-release-art { .top-release-art {
width: 100%; width: 100%;
aspect-ratio: 1; aspect-ratio: 1;
max-height: 80px;
max-width: 80px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
background: linear-gradient( background: linear-gradient(