fix(ui): softer chrome-gradient falloff + segmented media toggle (#1478) #228

2026-07-13T15:54:56-04:00

bvandeusen commented

2026-07-13 15:54:56 -04:00

Two operator-flagged polish items from the Vuetify-4 live review.

Gradient falloff

Reshaped the nav + sub-header fade from a near-linear ramp to hold-then-soft-drop: it holds fairly opaque (0.92 → seam 0.68) through the bulk of the chrome, then eases to transparent over a small section at the bottom with an intermediate stop, so it tails off softly instead of running a straight line into a hard edge. --fc-chrome-seam is the single tuning knob; raising it also improves tab-strip legibility over scrolling content.

Segmented media toggle

FC's global VBtn { rounded: 'pill' } default made Vuetify 4 pill-round each segment of the All/Images/Videos v-btn-toggle individually, so the rounded ends collided at the joins. Squared the inner segments and clipped the group to one 8px outline — a proper segmented control.

Both changes are colour / border-radius only — no control-height changes, so the filter-bar height and the measured nav offset (--fc-nav-h) are untouched.

CI green on dev head 50d6c42 (run 2231). No backend/DB changes.

🤖 Generated with Claude Code

https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi

Two operator-flagged polish items from the Vuetify-4 live review. ## Gradient falloff Reshaped the nav + sub-header fade from a near-linear ramp to **hold-then-soft-drop**: it holds fairly opaque (0.92 → seam `0.68`) through the bulk of the chrome, then eases to transparent over a small section at the bottom with an intermediate stop, so it tails off softly instead of running a straight line into a hard edge. `--fc-chrome-seam` is the single tuning knob; raising it also improves tab-strip legibility over scrolling content. ## Segmented media toggle FC's global `VBtn { rounded: 'pill' }` default made Vuetify 4 pill-round **each segment** of the All/Images/Videos `v-btn-toggle` individually, so the rounded ends collided at the joins. Squared the inner segments and clipped the group to one 8px outline — a proper segmented control. Both changes are **colour / border-radius only** — no control-height changes, so the filter-bar height and the measured nav offset (`--fc-nav-h`) are untouched. CI green on `dev` head `50d6c42` (run 2231). No backend/DB changes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi

bvandeusen added 1 commit 2026-07-13 15:54:56 -04:00

fix(ui): softer chrome-gradient falloff + segmented media toggle (#1478 )

CI / lint (push) Successful in 2s

Details

CI / frontend-build (push) Successful in 18s

Details

CI / backend-lint-and-test (push) Successful in 28s

Details

CI / integration (push) Successful in 3m49s

Details

50d6c42207

Two operator-flagged polish items from the Vuetify-4 review:

Gradient: reshape the nav + sub-header fade from a near-linear ramp to a
hold-then-soft-drop profile — hold high opacity (0.92 → seam 0.68) through the
bulk of the chrome, then ease to transparent over a small section at the bottom
with an intermediate stop, so it tails off softly instead of running a straight
line into a hard edge. Raising the shared --fc-chrome-seam also makes the tab
strips more legible over scrolling content.

Media toggle: FC's global VBtn { rounded: 'pill' } default made Vuetify 4
pill-round each SEGMENT of the All/Images/Videos v-btn-toggle individually, so
the rounded ends collided at the joins. Square the inner segments and clip the
group to one 8px outline — a proper segmented control.

Both are colour/border-radius only — no control height changes, so the filter
bar height and the nav offset (--fc-nav-h) are untouched.

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

bvandeusen merged commit 5a5694f200 into main

2026-07-13 15:55:02 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bvandeusen/FabledCurator#228