From 8040245e4541b820c2c2ae64e93482888e2d62b3 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Tue, 17 Mar 2026 15:26:03 +0100
Subject: [PATCH] feat(ui) : make kanban column headers sticky with scrollable
 content

Give kanban containers a fixed viewport height. Column headers stay fixed
while task cards scroll independently within each column.

Ticket: LST-28

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/pages/my-tasks.vue                   | 32 ++++++++++---------
 frontend/pages/portal/projects/[id]/index.vue |  8 ++---
 frontend/pages/projects/[id]/index.vue        | 32 ++++++++++---------
 3 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/frontend/pages/my-tasks.vue b/frontend/pages/my-tasks.vue
index dabc8b3..7daa140 100644
--- a/frontend/pages/my-tasks.vue
+++ b/frontend/pages/my-tasks.vue
@@ -328,7 +328,7 @@ onMounted(() => {
 
         <!-- Kanban View -->
         <div v-if="viewMode === 'kanban'">
-            <div class="mt-6 flex gap-3 overflow-x-auto pb-4">
+            <div class="mt-6 flex h-[calc(100vh-260px)] gap-3 overflow-x-auto pb-4">
                 <div
                     v-for="status in sortedStatuses"
                     :key="status.id"
@@ -340,24 +340,26 @@ onMounted(() => {
                     @drop.prevent="onDropStatus($event, status)"
                 >
                     <div
-                        class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"
+                        class="shrink-0 rounded-t-lg px-4 py-3 text-sm font-bold text-white"
                         :style="{ backgroundColor: status.color }"
                     >
                         {{ status.label }} ({{ tasksByStatus(status.id).length }})
                     </div>
-                    <div class="flex flex-col gap-3 p-3">
-                        <TaskCard
-                            v-for="task in tasksByStatus(status.id)"
-                            :key="task.id"
-                            :task="task"
-                            @click="openTaskEdit(task)"
-                        />
-                        <p
-                            v-if="tasksByStatus(status.id).length === 0"
-                            class="py-4 text-center text-xs text-neutral-400"
-                        >
-                            {{ $t('myTasks.noTasks') }}
-                        </p>
+                    <div class="min-h-0 flex-1 overflow-y-auto p-3">
+                        <div class="flex flex-col gap-3">
+                            <TaskCard
+                                v-for="task in tasksByStatus(status.id)"
+                                :key="task.id"
+                                :task="task"
+                                @click="openTaskEdit(task)"
+                            />
+                            <p
+                                v-if="tasksByStatus(status.id).length === 0"
+                                class="py-4 text-center text-xs text-neutral-400"
+                            >
+                                {{ $t('myTasks.noTasks') }}
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/frontend/pages/portal/projects/[id]/index.vue b/frontend/pages/portal/projects/[id]/index.vue
index 60676b7..d748cb3 100644
--- a/frontend/pages/portal/projects/[id]/index.vue
+++ b/frontend/pages/portal/projects/[id]/index.vue
@@ -31,13 +31,13 @@
         </div>
 
         <!-- Kanban board -->
-        <div v-else class="mt-4 flex flex-col gap-4 sm:flex-row sm:overflow-x-auto sm:pb-4">
+        <div v-else class="mt-4 flex h-[calc(100vh-200px)] flex-col gap-4 sm:flex-row sm:overflow-x-auto sm:pb-4">
             <div
                 v-for="col in columns"
                 :key="col.status"
-                class="min-w-0 flex-1 sm:min-w-[280px]"
+                class="flex min-w-0 flex-1 flex-col sm:min-w-[280px]"
             >
-                <div class="mb-3 flex items-center gap-2">
+                <div class="mb-3 flex shrink-0 items-center gap-2">
                     <div class="h-2 w-2 rounded-full" :class="col.dotClass" />
                     <h3 class="text-sm font-bold text-neutral-700">{{ col.label }}</h3>
                     <span class="ml-auto rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-semibold text-neutral-500">
@@ -45,7 +45,7 @@
                     </span>
                 </div>
                 <div
-                    class="min-h-[60px] space-y-2 rounded-lg border-2 border-transparent p-1 transition-colors"
+                    class="min-h-0 flex-1 space-y-2 overflow-y-auto rounded-lg border-2 border-transparent p-1 transition-colors"
                     :class="dragOverStatus === col.status ? 'border-primary-300 bg-primary-50/50' : ''"
                     @dragover.prevent="onDragOver(col.status)"
                     @dragleave="onDragLeave"
diff --git a/frontend/pages/projects/[id]/index.vue b/frontend/pages/projects/[id]/index.vue
index 07532b3..d17edd0 100644
--- a/frontend/pages/projects/[id]/index.vue
+++ b/frontend/pages/projects/[id]/index.vue
@@ -62,7 +62,7 @@
         </div>
 
         <!-- Kanban -->
-        <div class="mt-6 flex gap-3 overflow-x-auto pb-4">
+        <div class="mt-6 flex h-[calc(100vh-200px)] gap-3 overflow-x-auto pb-4">
             <div
                 v-for="status in statuses"
                 :key="status.id"
@@ -74,24 +74,26 @@
                 @drop.prevent="onDropStatus($event, status)"
             >
                 <div
-                    class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"
+                    class="shrink-0 rounded-t-lg px-4 py-3 text-sm font-bold text-white"
                     :style="{ backgroundColor: status.color }"
                 >
                     {{ status.label }} ({{ tasksByStatus(status.id).length }})
                 </div>
-                <div class="flex flex-col gap-3 p-3">
-                    <TaskCard
-                        v-for="task in tasksByStatus(status.id)"
-                        :key="task.id"
-                        :task="task"
-                        @click="openTaskEdit(task)"
-                    />
-                    <p
-                        v-if="tasksByStatus(status.id).length === 0"
-                        class="py-4 text-center text-xs text-neutral-400"
-                    >
-                        Aucun ticket
-                    </p>
+                <div class="min-h-0 flex-1 overflow-y-auto p-3">
+                    <div class="flex flex-col gap-3">
+                        <TaskCard
+                            v-for="task in tasksByStatus(status.id)"
+                            :key="task.id"
+                            :task="task"
+                            @click="openTaskEdit(task)"
+                        />
+                        <p
+                            v-if="tasksByStatus(status.id).length === 0"
+                            class="py-4 text-center text-xs text-neutral-400"
+                        >
+                            Aucun ticket
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>