fix(ui): double directory card width (220px -> 440px) + bound preview slot height (min 150 / max 220 / overflow hidden / explicit display+object-position) so tall source images can't escape on browsers that don't compute aspect-ratio

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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;

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;

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 {

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 {