fix(ui): tag-chip left-edge clipping + kind-coloured border #206

Merged

bvandeusen merged 2 commits from dev into main 2026-07-08 10:37:09 -04:00

Conversation 0 Commits 2 Files Changed 1

+12

bvandeusen commented 2026-07-08 10:37:03 -04:00

Owner

Copy Link

Copy Source

Two tag-chip (TagChip.vue) fixes, both flagged after the larger-chip change:

1. Left-edge clipping (25e555c) — the size=default chip widened Vuetify's negative start-margin on the leading kind-icon, placing it left of the .v-chip__content box whose overflow:hidden (name-truncation guard) then clipped its left edge. Zeroed the icon's negative inline-start margin so it sits inside the clip box.
2. Washed-out chips (a017771) — the tonal fill (esp. character = info) is faint and blends into the dark tag rail. Added a thin border in each chip's own kind colour via color-mix on currentColor. Theme-aware in light and dark; fill unchanged.

CSS-only, no migration. CI-green on dev (run 2063, all four lanes). Plain :latest redeploy picks it up.

🤖 Generated with Claude Code

Two tag-chip (TagChip.vue) fixes, both flagged after the larger-chip change: 1. **Left-edge clipping** (`25e555c`) — the size=default chip widened Vuetify's negative start-margin on the leading kind-icon, placing it left of the `.v-chip__content` box whose `overflow:hidden` (name-truncation guard) then clipped its left edge. Zeroed the icon's negative inline-start margin so it sits inside the clip box. 2. **Washed-out chips** (`a017771`) — the tonal fill (esp. character = info) is faint and blends into the dark tag rail. Added a thin border in each chip's own kind colour via `color-mix` on `currentColor`. Theme-aware in light and dark; fill unchanged. CSS-only, no migration. CI-green on dev (run 2063, all four lanes). Plain `:latest` redeploy picks it up. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

bvandeusen added 2 commits 2026-07-08 10:37:03 -04:00

fix(ui): stop leading tag-chip icon clipping on the left edge ... 25e555cab6

The larger size=default chip widened Vuetify's negative start-margin on the
leading kind-icon, placing it left of the .v-chip__content box whose
overflow:hidden (the name-truncation guard) then clipped its left edge.
Zero the icon's negative inline-start margin so it sits inside the clip box;
the chip's 12px padding keeps a comfortable left inset.

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

feat(ui): thin kind-coloured border on tag chips so they don't wash out ... a017771621

The tonal fill (esp. character = info) is intentionally faint and blends into
the dark tag rail. Add a thin border in each chip's own kind colour via
color-mix on currentColor (the tonal chip's themed foreground), defining the
edge without changing the fill. Theme-aware in both light and dark.

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

bvandeusen merged commit 2923257529 into main 2026-07-08 10:37:09 -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

bvandeusen

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bvandeusen/FabledCurator#206