fix(ui): Vuetify-4 review polish — active-tab indicator + one continuous chrome gradient #226

Merged

bvandeusen merged 2 commits from dev into main 2026-07-13 14:48:00 -04:00

Conversation 0 Commits 2 Files Changed 8

+93 -34

bvandeusen commented 2026-07-13 14:47:49 -04:00

Owner

Copy Link

Copy Source

Two operator-flagged issues from the Vuetify 4 live review.

1. Active-tab indicator (61b14e8)

v4's MD3 v-tab "slider" underline rendered wider than the tab and floated below it. Dropped the slider (.v-tab__slider) and marked the active tab with a subtle accent fill + rounded top instead — a clean, unambiguous highlight app-wide (Subscriptions / Browse / Settings / Series / Gallery).

2. Continuous chrome gradient (eed42a2)

The nav gradient read as happening twice: the TopNav faded to transparent, then each sticky sub-header restarted its own dark→clear fade (Gallery's filter bar) or sat as a solid surface band (Browse / Series / Settings tabs) / a border (Subscriptions).

Per the operator's steer ("group the sub-nav as part of the nav, single gradient"), a new shared .fc-chrome-continues primitive makes the nav + sub-header read as one fade:

• On meta.stickyChrome routes the nav fades opaque → a shared --fc-chrome-seam alpha (not to transparent).
• Each sub-header continues from that exact seam alpha → transparent over its own height (percentage stops, so it survives the filter bar's expanding refine panel).
• Both reference --fc-chrome-seam, so the alphas meet exactly at the 64px boundary — no re-darkening, no doubling. The primitive's blur keeps tabs/controls legible where the solid bars had none.

--fc-chrome-seam (0.46) is the single tuning knob if the strips read too faint/heavy over scrolling content.

Applied to all five sticky sub-headers: Gallery filter bar, Browse / Series / Settings tabs, Subscriptions tabs.

CI green on dev head eed42a2 (run 2223). No backend/DB changes.

🤖 Generated with Claude Code

https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi

Two operator-flagged issues from the Vuetify 4 live review. ## 1. Active-tab indicator (`61b14e8`) v4's MD3 v-tab "slider" underline rendered wider than the tab and floated below it. Dropped the slider (`.v-tab__slider`) and marked the active tab with a subtle accent fill + rounded top instead — a clean, unambiguous highlight app-wide (Subscriptions / Browse / Settings / Series / Gallery). ## 2. Continuous chrome gradient (`eed42a2`) The nav gradient read as *happening twice*: the TopNav faded to transparent, then each sticky sub-header **restarted** its own dark→clear fade (Gallery's filter bar) or sat as a solid `surface` band (Browse / Series / Settings tabs) / a border (Subscriptions). Per the operator's steer ("group the sub-nav as part of the nav, single gradient"), a new shared `.fc-chrome-continues` primitive makes the nav + sub-header read as **one** fade: - On `meta.stickyChrome` routes the nav fades opaque → a shared `--fc-chrome-seam` alpha (not to transparent). - Each sub-header continues from that exact seam alpha → transparent over its own height (percentage stops, so it survives the filter bar's expanding refine panel). - Both reference `--fc-chrome-seam`, so the alphas meet exactly at the 64px boundary — no re-darkening, no doubling. The primitive's blur keeps tabs/controls legible where the solid bars had none. `--fc-chrome-seam` (0.46) is the single tuning knob if the strips read too faint/heavy over scrolling content. Applied to all five sticky sub-headers: Gallery filter bar, Browse / Series / Settings tabs, Subscriptions tabs. CI green on `dev` head `eed42a2` (run 2223). No backend/DB changes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi

bvandeusen added 2 commits 2026-07-13 14:47:49 -04:00

fix(ui): cleaner active-tab indicator (drop odd v4 slider) (#1480) ... 61b14e8f65

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>

fix(ui): one continuous chrome gradient across nav + sticky sub-headers (#1478) ... eed42a260a

The TopNav and each sticky sub-header pinned beneath it (Gallery's filter bar,
the Browse/Series/Settings/Subscriptions tabs bars) each painted their OWN
dark-to-transparent gradient (Gallery) or a solid surface band (the rest), so
the fade read as happening twice — dark, fade out, then dark again — instead of
one gradient flowing from the nav down through the sub-nav.

Operator asked to treat the sub-nav as part of the nav with a single gradient.
New shared .fc-chrome-continues primitive (app.css): the nav fades from opaque
to a shared --fc-chrome-seam alpha (on views flagged meta.stickyChrome), and the
sub-header continues from that exact seam alpha to transparent over its own
height. Both reference the same var so the alphas meet at the 64px boundary — no
re-darkening, no doubling. Percentage stops keep it spanning the filter bar's
expanding refine panel; the primitive's blur keeps tabs/controls legible where
the old solid bars had none. --fc-chrome-seam is the single tuning knob.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

bvandeusen merged commit fc0293029d into main 2026-07-13 14:48:00 -04:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

renovate-bot bvandeusen

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bvandeusen/FabledCurator#226