From 802659434f2ac2500e14c94598fedf45acc7189d Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Sat, 14 Mar 2026 09:10:04 +0100
Subject: [PATCH] fix(frontend) : fix time-tracking page scroll with fixed
 header and filters

Restructure time-tracking page layout so the page title and filters
stay fixed while only the calendar grid body scrolls internally.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../time-tracking/TimeTrackingCalendar.vue    |   7 +-
 frontend/pages/time-tracking.vue              | 100 +++++++++---------
 2 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/frontend/components/time-tracking/TimeTrackingCalendar.vue b/frontend/components/time-tracking/TimeTrackingCalendar.vue
index 2e77fc0..22bf444 100644
--- a/frontend/components/time-tracking/TimeTrackingCalendar.vue
+++ b/frontend/components/time-tracking/TimeTrackingCalendar.vue
@@ -1,9 +1,8 @@
 <template>
-    <div ref="calendarEl" class="relative rounded-lg border border-neutral-200 bg-white">
+    <div ref="calendarEl" class="relative flex h-full flex-col rounded-lg border border-neutral-200 bg-white">
         <!-- Day headers -->
         <div
-            class="sticky z-20 flex border-b border-neutral-200 bg-white"
-            :style="{ top: `${stickyOffset}px` }"
+            class="z-20 flex flex-shrink-0 border-b border-neutral-200 bg-white rounded-t-lg"
         >
             <div class="w-16 shrink-0 border-r border-neutral-200" />
             <div
@@ -22,7 +21,7 @@
         </div>
 
         <!-- Grid body -->
-        <div ref="gridBodyEl" class="relative flex">
+        <div ref="gridBodyEl" class="relative flex min-h-0 flex-1 overflow-y-auto">
             <!-- Hour labels -->
             <div class="w-16 shrink-0">
                 <div
diff --git a/frontend/pages/time-tracking.vue b/frontend/pages/time-tracking.vue
index 62c901f..8de0eb5 100644
--- a/frontend/pages/time-tracking.vue
+++ b/frontend/pages/time-tracking.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <div ref="pageHeaderEl" class="sticky top-0 z-40 bg-white pb-4">
+    <div class="flex min-h-0 flex-1 flex-col">
+        <div ref="pageHeaderEl" class="flex-shrink-0 pb-4">
             <div class="flex items-center justify-between">
                 <h1 class="text-2xl font-bold text-primary-500">Suivi des temps</h1>
                 <button
@@ -12,61 +12,61 @@
             </div>
 
             <div class="relative z-30 mt-4 flex items-center gap-4">
-            <h2 class="text-lg font-bold text-orange-500">
-                {{ currentMonthLabel }}
-            </h2>
+                <h2 class="text-lg font-bold text-orange-500">
+                    {{ currentMonthLabel }}
+                </h2>
 
-            <div class="flex items-center gap-1 rounded-md border border-neutral-200">
-                <button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigatePrev">
-                    <Icon name="mdi:chevron-left" size="20" />
-                </button>
-                <button
-                    v-for="mode in (['week', 'day', 'list'] as const)"
-                    :key="mode"
-                    class="px-3 py-1 text-sm font-semibold transition"
-                    :class="viewMode === mode ? 'bg-primary-500 text-white rounded' : 'text-neutral-500 hover:text-neutral-700'"
-                    @click="viewMode = mode"
-                >
-                    {{ mode === 'week' ? 'Semaine' : mode === 'day' ? 'Jour' : 'Liste' }}
-                </button>
-                <button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigateNext">
-                    <Icon name="mdi:chevron-right" size="20" />
-                </button>
-            </div>
+                <div class="flex items-center gap-1 rounded-md border border-neutral-200">
+                    <button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigatePrev">
+                        <Icon name="mdi:chevron-left" size="20" />
+                    </button>
+                    <button
+                        v-for="mode in (['week', 'day', 'list'] as const)"
+                        :key="mode"
+                        class="px-3 py-1 text-sm font-semibold transition"
+                        :class="viewMode === mode ? 'bg-primary-500 text-white rounded' : 'text-neutral-500 hover:text-neutral-700'"
+                        @click="viewMode = mode"
+                    >
+                        {{ mode === 'week' ? 'Semaine' : mode === 'day' ? 'Jour' : 'Liste' }}
+                    </button>
+                    <button class="px-2 py-1 text-neutral-500 hover:text-neutral-700" @click="navigateNext">
+                        <Icon name="mdi:chevron-right" size="20" />
+                    </button>
+                </div>
 
-            <MalioSelect
-                v-model="selectedUserId"
-                :options="userOptions"
-                min-width="!w-40"
-                text-field="text-sm"
-                text-value="text-sm"
-                label="User"
-                empty-option-label="User"
-            />
+                <MalioSelect
+                    v-model="selectedUserId"
+                    :options="userOptions"
+                    min-width="!w-44"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                    label="User"
+                    empty-option-label="User"
+                />
 
-            <MalioSelect
-                v-model="selectedProjectId"
-                :options="projectOptions"
-                empty-option-label="Tous"
-                label="Projet"
-                min-width="!w-40"
-                text-field="text-sm"
-                text-value="text-sm"
-            />
+                <MalioSelect
+                    v-model="selectedProjectId"
+                    :options="projectOptions"
+                    empty-option-label="Tous"
+                    label="Projet"
+                    min-width="!w-44"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
 
-            <MalioSelect
-                v-model="selectedTagId"
-                :options="tagOptions"
-                empty-option-label="Tous"
-                label="Tag"
-                min-width="!w-40"
-                text-field="text-sm"
-                text-value="text-sm"
-            />
+                <MalioSelect
+                    v-model="selectedTagId"
+                    :options="tagOptions"
+                    empty-option-label="Tous"
+                    label="Tag"
+                    min-width="!w-44"
+                    text-field="text-sm"
+                    text-value="text-sm"
+                />
             </div>
         </div>
 
-        <div class="mt-4">
+        <div class="mt-4 -mb-24 min-h-0 flex-1">
             <TimeEntryList
                 v-if="viewMode === 'list'"
                 :entries="filteredEntries"