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:
@@ -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(
|
||||||
|
|||||||
Reference in New Issue
Block a user