Merge remote-tracking branch 'origin/main'

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>

frontend/components/Label/CreateModal.vue

@@ -12,7 +12,7 @@
       <FormTextArea
         v-model="form.description"
         :label="$t('components.label.create_modal.label_description')"
-        :max-length="255"
+        :max-length="1000"
       />
       <ColorSelector v-model="form.color" :label="$t('components.label.create_modal.label_color')" :show-hex="true" />
       <div class="mt-4 flex flex-row-reverse">

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,

frontend/lib/api/types/data-contracts.ts

@@ -648,7 +648,7 @@ export interface ItemUpdate {
 
 export interface LabelCreate {
   color: string;
-  /** @maxLength 255 */
+  /** @maxLength 1000 */
   description: string;
   /**
    * @minLength 1

frontend/pages/label/[id].vue

@@ -129,7 +129,7 @@
         <FormTextArea
           v-model="updateData.description"
           :label="$t('components.label.create_modal.label_description')"
-          :max-length="255"
+          :max-length="1000"
         />
         <ColorSelector
           v-model="updateData.color"