From 8c87cda9abd83f430edd5d5f148e5b77548ab759 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Natal=C3=AD=20Paura?=
 <30585029+natilou@users.noreply.github.com>
Date: Thu, 21 Aug 2025 15:52:10 -0300
Subject: [PATCH] Fix label name length (#822)

* Fix label name length

The labels name were shortened to the max length of 20 characters and not taking advantage of extra space. And it was difficult to distinguish between labels with the same prefix.

* run task ui:fix

* fix label selector when creating an item

* feat: sort styles for line wrapping

---------

Co-authored-by: Tonya <tonya@tokia.dev>
---
 frontend/components/Label/Chip.vue     |  2 +-
 frontend/components/Label/Selector.vue | 29 ++++++++++----------------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/frontend/components/Label/Chip.vue b/frontend/components/Label/Chip.vue
index bcb5ebe3..c1b4a0f8 100644
--- a/frontend/components/Label/Chip.vue
+++ b/frontend/components/Label/Chip.vue
@@ -42,6 +42,6 @@
         <MdiArrowUp class="hidden group-hover/label-chip:block" />
       </div>
     </div>
-    {{ label.name.length > 20 ? `${label.name.substring(0, 20)}...` : label.name }}
+    {{ label.name }}
   </NuxtLink>
 </template>
diff --git a/frontend/components/Label/Selector.vue b/frontend/components/Label/Selector.vue
index 72b3fb29..e12ca16f 100644
--- a/frontend/components/Label/Selector.vue
+++ b/frontend/components/Label/Selector.vue
@@ -7,16 +7,16 @@
     <TagsInput
       v-model="modelValue"
       class="w-full gap-0 px-0"
-      :display-value="v => shortenedLabels.find(l => l.id === v)?.name ?? 'Loading...'"
+      :display-value="v => props.labels.find(l => l.id === v)?.name ?? 'Loading...'"
     >
-      <div class="flex flex-wrap items-center gap-2 px-3">
-        <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+      <div class="flex flex-wrap items-center gap-2 overflow-hidden px-3">
+        <TagsInputItem v-for="item in modelValue" :key="item" :value="item" class="h-auto overflow-hidden text-wrap">
           <span
-            v-if="shortenedLabels.find(l => l.id === item)?.color"
-            class="ml-2 inline-block size-4 rounded-full"
-            :style="{ backgroundColor: shortenedLabels.find(l => l.id === item)?.color }"
+            v-if="props.labels.find(l => l.id === item)?.color"
+            class="ml-2 size-4 shrink-0 rounded-full"
+            :style="{ backgroundColor: props.labels.find(l => l.id === item)?.color }"
           />
-          <TagsInputItemText />
+          <TagsInputItemText class="py-0.5" />
           <TagsInputItemDelete />
         </TagsInputItem>
       </div>
@@ -61,9 +61,9 @@
                   "
                 >
                   <span
-                    class="mr-2 inline-block size-4 rounded-full align-middle"
-                    :class="{ border: shortenedLabels.find(l => l.id === label.value)?.color }"
-                    :style="{ backgroundColor: shortenedLabels.find(l => l.id === label.value)?.color }"
+                    class="mr-2 size-4 shrink-0 rounded-full align-middle"
+                    :class="{ border: props.labels.find(l => l.id === label.value)?.color }"
+                    :style="{ backgroundColor: props.labels.find(l => l.id === label.value)?.color }"
                   />
                   {{ label.label }}
                 </CommandItem>
@@ -114,16 +114,9 @@
   const open = ref(false);
   const searchTerm = ref("");
 
-  const shortenedLabels = computed(() => {
-    return props.labels.map(l => ({
-      ...l,
-      name: l.name.length > 20 ? `${l.name.substring(0, 20)}...` : l.name,
-    }));
-  });
-
   const filteredLabels = computed(() => {
     const filtered = fuzzysort
-      .go(searchTerm.value, shortenedLabels.value, { key: "name", all: true })
+      .go(searchTerm.value, props.labels, { key: "name", all: true })
       .map(l => ({
         value: l.obj.id,
         label: l.obj.name,