From 61b14e8f6575e44d725bf2ffc33a6ba544188463 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Mon, 13 Jul 2026 14:27:02 -0400 Subject: [PATCH] fix(ui): cleaner active-tab indicator (drop odd v4 slider) (#1480) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- frontend/src/styles/app.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 31712b8..206a5b5 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -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; +}