ux(failing-sources): zebra striping + hover highlight on rows
CI / lint (push) Successful in 3s
CI / backend-lint-and-test (push) Successful in 13s
CI / frontend-build (push) Successful in 19s
CI / intimp (push) Successful in 3m38s
CI / intapi (push) Successful in 8m29s
CI / intcore (push) Successful in 8m58s

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
This commit is contained in:
2026-06-01 20:14:48 -04:00
parent cfa4fb4084
commit 717b601c81
@@ -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; }