fix(ui): long tag chips no longer overflow the rail and clip their ✕
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
This commit is contained in:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user