From c16ddeb9f8d8a1e91934805201a71ce995b2786f Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 21 May 2026 09:40:35 +0200
Subject: [PATCH] =?UTF-8?q?fix(task)=20:=20cartes=20responsive=20=E2=80=94?=
 =?UTF-8?q?=20troncature=20badges,=20max=202=20tags=20+=20=C2=AB=20+N=20?=
 =?UTF-8?q?=C2=BB,=20titre=20line-clamp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/components/task/TaskCard.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/components/task/TaskCard.vue b/frontend/components/task/TaskCard.vue
index c8a92ef..fecf041 100644
--- a/frontend/components/task/TaskCard.vue
+++ b/frontend/components/task/TaskCard.vue
@@ -27,7 +27,7 @@
                         :title="$t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') })"
                     />
                 </div>
-                <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+                <h4 class="line-clamp-2 text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
             </div>
             <MalioButtonIcon
                 :icon="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'"
@@ -39,33 +39,41 @@
             />
         </div>
 
-        <div class="mt-2 flex items-center gap-1.5">
+        <div class="mt-2 flex min-w-0 items-center gap-1.5">
             <span
                 v-if="showStatusBadge && task.status"
-                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                class="shrink-0 max-w-[7rem] truncate rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                 :style="{ backgroundColor: task.status.color }"
             >
                 {{ task.status.label }}
             </span>
             <span
                 v-if="task.priority"
-                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                class="shrink-0 max-w-[7rem] truncate rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                 :style="{ backgroundColor: task.priority.color }"
             >
                 {{ task.priority.label }}
             </span>
             <span
-                v-for="tag in task.tags"
+                v-for="tag in task.tags.slice(0, 2)"
                 :key="tag.id"
-                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                class="shrink-0 max-w-[7rem] truncate rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                 :style="{ backgroundColor: tag.color }"
+                :title="tag.label"
             >
                 {{ tag.label }}
             </span>
+            <span
+                v-if="task.tags.length > 2"
+                class="shrink-0 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-600"
+                :title="task.tags.slice(2).map(t => t.label).join(', ')"
+            >
+                +{{ task.tags.length - 2 }}
+            </span>
             <!-- Deadline badge -->
             <span
                 v-if="task.deadline"
-                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                class="shrink-0 max-w-[7rem] truncate rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                 :style="{ backgroundColor: deadlineColor }"
                 :title="task.deadline"
             >