From 717b601c819c452640d1e71ffb241ba737b7c061 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Mon, 1 Jun 2026 20:14:48 -0400 Subject: [PATCH] ux(failing-sources): zebra striping + hover highlight on rows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Operator-flagged 2026-06-01: with the failing-sources panel expanded, all rows have the same flat low-opacity background, no visual track from the artist name on the left to the Logs/Retry buttons on the right. Hard to tell which row a button belongs to when scanning down a list of 17. Three pure-CSS changes (no DOM, no logic): - 3px gap between rows (was 2px) — slightly more breathing room - Even rows get a darker surface tint (zebra striping) - Hover paints the whole row in a low-opacity error tint, so moving the cursor toward Logs/Retry lights up the whole horizontal band and the eye traces back to the artist name automatically --- .../components/subscriptions/FailingSourcesCard.vue | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/subscriptions/FailingSourcesCard.vue b/frontend/src/components/subscriptions/FailingSourcesCard.vue index 0ceb99e..5f16154 100644 --- a/frontend/src/components/subscriptions/FailingSourcesCard.vue +++ b/frontend/src/components/subscriptions/FailingSourcesCard.vue @@ -90,13 +90,24 @@ async function onViewLogs(s) { .fc-fail__title { font-weight: 600; } .fc-fail__body { padding: 0 14px 10px; - display: flex; flex-direction: column; gap: 2px; + display: flex; flex-direction: column; gap: 3px; } .fc-fail__row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; 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. */ + transition: background 80ms ease; +} +.fc-fail__row:nth-child(even) { + background: rgb(var(--v-theme-surface) / 0.55); +} +.fc-fail__row:hover { + background: rgb(var(--v-theme-error) / 0.18); } .fc-fail__artist { font-weight: 600; white-space: nowrap; } .fc-fail__count { flex: 0 0 auto; }