diff --git a/frontend/src/components/subscriptions/FailingSourcesCard.vue b/frontend/src/components/subscriptions/FailingSourcesCard.vue index 5f16154..21d8e3d 100644 --- a/frontend/src/components/subscriptions/FailingSourcesCard.vue +++ b/frontend/src/components/subscriptions/FailingSourcesCard.vue @@ -90,24 +90,28 @@ async function onViewLogs(s) { .fc-fail__title { font-weight: 600; } .fc-fail__body { padding: 0 14px 10px; - display: flex; flex-direction: column; gap: 3px; + display: flex; flex-direction: column; + /* Borders, not gap, so the row separators are visible inside the + * tonal error card (where surface tints get washed out and gap is + * just empty space). */ } .fc-fail__row { display: flex; align-items: center; gap: 10px; - padding: 6px 8px; + padding: 8px 10px; border-radius: 4px; - background: rgb(var(--v-theme-surface) / 0.4); - /* Zebra striping + hover highlight: gives the eye a horizontal track - * from the artist name on the left to the Logs/Retry buttons on the - * right. Operator-flagged 2026-06-01 — without these, all rows blur - * together and it's hard to pick which row a button belongs to. */ + /* Hover-darken gives the eye a horizontal track from the artist + * name on the left to the Logs/Retry buttons on the right. + * Bottom border replaces the previous-too-subtle zebra striping — + * inside the tonal error card, surface-tint contrast was negligible. + * Operator-flagged 2026-06-01 (twice). */ + border-bottom: 1px solid rgb(255 255 255 / 0.08); transition: background 80ms ease; } -.fc-fail__row:nth-child(even) { - background: rgb(var(--v-theme-surface) / 0.55); +.fc-fail__row:last-child { + border-bottom: none; } .fc-fail__row:hover { - background: rgb(var(--v-theme-error) / 0.18); + background: rgb(0 0 0 / 0.25); } .fc-fail__artist { font-weight: 600; white-space: nowrap; } .fc-fail__count { flex: 0 0 auto; }