Merge pull request 'fix(ui): tag-chip left-edge clipping + kind-coloured border' (#206) from dev into main

frontend/src/components/modal/TagChip.vue

@@ -143,7 +143,19 @@ 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
+   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;