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