From 25e555cab6593df338e21126f7efe5af73a36c04 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Wed, 8 Jul 2026 10:29:28 -0400 Subject: [PATCH 1/2] fix(ui): stop leading tag-chip icon clipping on the left edge 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) --- frontend/src/components/modal/TagChip.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/components/modal/TagChip.vue b/frontend/src/components/modal/TagChip.vue index 0e1b6dc..dd7cf11 100644 --- a/frontend/src/components/modal/TagChip.vue +++ b/frontend/src/components/modal/TagChip.vue @@ -144,6 +144,12 @@ function iconFor (k) { return KIND_ICONS[k] || 'mdi-tag' } .fc-tag-chip { display: inline-flex; align-items: center; gap: 1px; max-width: 100%; min-width: 0; } .fc-tag-chip__nav { max-width: 100%; min-width: 0; } .fc-tag-chip__nav :deep(.v-chip__content) { min-width: 0; overflow: hidden; } +/* The bigger size=default chip widens Vuetify's negative start-margin on the + leading kind-icon, pulling it LEFT of the content box above — where that + overflow:hidden then clips the icon's left edge as a vertical slice + (operator-flagged 2026-07-08). Zero the pull so the icon sits inside the clip + box; the chip's own 12px padding keeps a comfortable left inset. */ +.fc-tag-chip__nav :deep(.v-icon--start) { margin-inline-start: 0; } .fc-tag-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; From a017771621d434acc3ec0a867a78ff90d6f3d0a0 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Wed, 8 Jul 2026 10:31:44 -0400 Subject: [PATCH 2/2] feat(ui): thin kind-coloured border on tag chips so they don't wash out 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) --- frontend/src/components/modal/TagChip.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/components/modal/TagChip.vue b/frontend/src/components/modal/TagChip.vue index dd7cf11..f935a68 100644 --- a/frontend/src/components/modal/TagChip.vue +++ b/frontend/src/components/modal/TagChip.vue @@ -143,6 +143,12 @@ function iconFor (k) { return KIND_ICONS[k] || 'mdi-tag' } chip's hover title. */ .fc-tag-chip { display: inline-flex; align-items: center; gap: 1px; max-width: 100%; min-width: 0; } .fc-tag-chip__nav { max-width: 100%; min-width: 0; } +/* Tonal chips (esp. character = info) wash out against the dark rail — the fill + is intentionally faint. Give every tag chip a thin border in its OWN kind + colour (currentColor = the tonal chip's themed foreground) so the edge reads + clearly without touching the fill (operator-asked 2026-07-08). Theme-aware: + currentColor tracks the kind colour in either light or dark. */ +.fc-tag-chip__nav { border: thin solid color-mix(in srgb, currentColor 55%, transparent); } .fc-tag-chip__nav :deep(.v-chip__content) { min-width: 0; overflow: hidden; } /* The bigger size=default chip widens Vuetify's negative start-margin on the leading kind-icon, pulling it LEFT of the content box above — where that