From 4f4ddecf7599086c07af50e0e75aa202e4bf9e49 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 6 Jul 2026 22:22:21 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20long=20tag=20chips=20no=20longer=20o?=
 =?UTF-8?q?verflow=20the=20rail=20and=20clip=20their=20=E2=9C=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A character+fandom(+AUTO) chip could exceed the tag-panel width, pushing the
close ✕ off the right edge so the tag couldn't be removed (operator-flagged with
a "Mirko - Rumi Usagiyama → My Hero Academia AUTO" screenshot). Cap the chip at
100% of the rail and make the NAME the elastic part (ellipsis-truncates), so the
✕, fandom, and AUTO badge stay reachable; the full name stays on the hover title.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CDgx8bQS5YrGRK76v8HUnM
---
 frontend/src/components/modal/TagChip.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/modal/TagChip.vue b/frontend/src/components/modal/TagChip.vue
index 7e11b31..ccd698d 100644
--- a/frontend/src/components/modal/TagChip.vue
+++ b/frontend/src/components/modal/TagChip.vue
@@ -10,7 +10,7 @@
       @click:close="$emit('remove', tag.id)"
     >
       <v-icon start size="x-small">{{ iconFor(tag.kind) }}</v-icon>
-      {{ tag.name }}<v-icon
+      <span class="fc-tag-chip__name">{{ tag.name }}</span><v-icon
         v-if="tag.is_system" end size="x-small" class="fc-tag-chip__system"
         title="System tag — tagged items are excluded from training other concepts"
       >mdi-shield-outline</v-icon><span
@@ -130,7 +130,17 @@ function iconFor (k) { return KIND_ICONS[k] || 'mdi-tag' }
 </script>
 
 <style scoped>
-.fc-tag-chip { display: inline-flex; align-items: center; gap: 1px; }
+/* A chip must never exceed the rail — a long character+fandom(+AUTO) chip used
+   to overflow the right edge and clip its close ✕ (operator-flagged 2026-07-06).
+   The name is the elastic part: it ellipsis-truncates so the ✕, fandom, and AUTO
+   badge stay reachable. Full name is still available via the 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; }
+.fc-tag-chip__nav :deep(.v-chip__content) { min-width: 0; overflow: hidden; }
+.fc-tag-chip__name {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  min-width: 0; flex: 0 1 auto;
+}
 /* The chip body navigates to the filtered gallery (#5); signal it's clickable.
    The close ✕ (remove) and the sibling kebab stay as the explicit controls. */
 .fc-tag-chip__nav { cursor: pointer; }