diff --git a/frontend/src/components/settings/TagEvalCard.vue b/frontend/src/components/settings/TagEvalCard.vue index 70f3735..ca218cc 100644 --- a/frontend/src/components/settings/TagEvalCard.vue +++ b/frontend/src/components/settings/TagEvalCard.vue @@ -87,21 +87,27 @@
-
Head would suggest (untagged, high score)
+
Head would suggest (untagged, high score) — click to open in Explore
- + class="fc-ex__thumb" :href="`/explore/${it.id}`" target="_blank" + rel="noopener" :title="`#${it.id} — open in Explore`" + > + +
-
Head doubts these (your positives, low score)
+
Head doubts these (your positives, low score) — click to open in Explore
- + class="fc-ex__thumb" :href="`/explore/${it.id}`" target="_blank" + rel="noopener" :title="`#${it.id} — open in Explore`" + > + +
@@ -202,10 +208,13 @@ function formatTime(iso) { .fc-down { color: rgb(var(--v-theme-error)); } .fc-curve { margin-bottom: 8px; } .fc-curve__pt { margin-left: 10px; font-size: 13px; font-variant-numeric: tabular-nums; } -.fc-ex__row { margin-top: 6px; } -.fc-ex__thumbs { display: flex; flex-wrap: wrap; gap: 4px; } +.fc-ex__row { margin-top: 8px; } +.fc-ex__thumbs { display: flex; flex-wrap: wrap; gap: 6px; } .fc-ex__thumb { - width: 56px; height: 56px; object-fit: cover; border-radius: 4px; - background: rgb(var(--v-theme-surface-light)); + display: block; width: 120px; height: 120px; border-radius: 6px; + overflow: hidden; background: rgb(var(--v-theme-surface-light)); + outline: 1px solid transparent; transition: outline-color 0.12s; } +.fc-ex__thumb:hover { outline-color: rgb(var(--v-theme-accent)); } +.fc-ex__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }