diff --git a/frontend/src/components/discovery/ArtistCard.vue b/frontend/src/components/discovery/ArtistCard.vue index 55564cb..6c4bace 100644 --- a/frontend/src/components/discovery/ArtistCard.vue +++ b/frontend/src/components/discovery/ArtistCard.vue @@ -38,9 +38,18 @@ function onCardClick() { .fc-artistcard { cursor: pointer; } .fc-artistcard__previews { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 2px; aspect-ratio: 3 / 1; background: rgb(var(--v-theme-surface-light)); + gap: 2px; aspect-ratio: 3 / 1; + /* Explicit floor + ceiling so tall source images can't escape the + preview slot even on browsers where aspect-ratio doesn't compute. */ + min-height: 150px; max-height: 220px; + overflow: hidden; + background: rgb(var(--v-theme-surface-light)); +} +.fc-artistcard__previews img { + display: block; + width: 100%; height: 100%; + object-fit: cover; object-position: center; } -.fc-artistcard__previews img { width: 100%; height: 100%; object-fit: cover; } .fc-artistcard__noimg { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/components/discovery/TagCard.vue b/frontend/src/components/discovery/TagCard.vue index 4475aab..9eb27ad 100644 --- a/frontend/src/components/discovery/TagCard.vue +++ b/frontend/src/components/discovery/TagCard.vue @@ -106,9 +106,19 @@ function submit() { .fc-tagcard { cursor: pointer; } .fc-tagcard__previews { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 2px; aspect-ratio: 3 / 1; background: rgb(var(--v-theme-surface-light)); + gap: 2px; aspect-ratio: 3 / 1; + /* Explicit floor + ceiling so tall source images can't escape the + preview slot even on browsers where aspect-ratio doesn't compute + (older Safari, embedded webviews). */ + min-height: 150px; max-height: 220px; + overflow: hidden; + background: rgb(var(--v-theme-surface-light)); +} +.fc-tagcard__previews img { + display: block; + width: 100%; height: 100%; + object-fit: cover; object-position: center; } -.fc-tagcard__previews img { width: 100%; height: 100%; object-fit: cover; } .fc-tagcard__noimg { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/views/ArtistsView.vue b/frontend/src/views/ArtistsView.vue index dc32f82..94913a1 100644 --- a/frontend/src/views/ArtistsView.vue +++ b/frontend/src/views/ArtistsView.vue @@ -84,7 +84,7 @@ onUnmounted(() => observer && observer.disconnect()) } .fc-artists__grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 12px; } .fc-artists__sentinel { diff --git a/frontend/src/views/TagsView.vue b/frontend/src/views/TagsView.vue index 552c7ea..0d748ef 100644 --- a/frontend/src/views/TagsView.vue +++ b/frontend/src/views/TagsView.vue @@ -236,7 +236,7 @@ async function onDeleteTagConfirm() { } .fc-tags__grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 12px; } .fc-tags__sentinel {