fix(ui): cleaner active-tab indicator (drop odd v4 slider) (#1480)
CI / lint (push) Successful in 3s
CI / frontend-build (push) Successful in 24s
CI / backend-lint-and-test (push) Successful in 40s
CI / integration (push) Successful in 3m53s

Vuetify 4's MD3 v-tab slider underline rendered wider than the tab and floated
below it (operator-flagged in the v4 review). The active tab's text is already
accent-coloured, so drop the slider and mark the active tab with a subtle accent
fill + rounded top — a clean highlight, app-wide across all tabbed views.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-13 14:27:02 -04:00
parent 447bf73519
commit 61b14e8f65
+12
View File
@@ -49,3 +49,15 @@
ul, ol, figure, details, summary { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
}
/* Active-tab indicator (operator-flagged 2026-07-13 in the Vuetify-4 review): v4's
MD3 v-tab "slider" underline renders wider than the tab and floats below it. The
active tab's TEXT is already accent-coloured (color="accent"), so drop the slider
and mark the active tab with a subtle accent fill + rounded top — a clean,
unambiguous highlight app-wide (Subscriptions / Browse / Settings / Series). */
.v-tab__slider { display: none !important; }
.v-tab[aria-selected="true"],
.v-tab.v-tab--selected {
background: rgb(var(--v-theme-accent) / 0.12);
border-radius: 8px 8px 0 0;
}