From 25b648a1b134c6fd846a152860cae8731ec15cf5 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Sun, 15 Mar 2026 08:34:07 +0100
Subject: [PATCH] fix(frontend) : align time-tracking filters with view mode
 toggle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/pages/time-tracking.vue | 64 +++++++++++++++++---------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/frontend/pages/time-tracking.vue b/frontend/pages/time-tracking.vue
index 8d85976..b567208 100644
--- a/frontend/pages/time-tracking.vue
+++ b/frontend/pages/time-tracking.vue
@@ -13,11 +13,11 @@
             </div>
 
             <div class="relative z-30 mt-4 flex flex-wrap items-center gap-3 sm:gap-4">
-                <h2 class="text-lg font-bold text-orange-500">
+                <h2 class="shrink-0 whitespace-nowrap text-lg font-bold text-orange-500">
                     {{ currentMonthLabel }}
                 </h2>
 
-                <div class="flex items-center gap-1 rounded-md border border-neutral-200">
+                <div class="flex shrink-0 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>
@@ -35,35 +35,41 @@
                     </button>
                 </div>
 
-                <MalioSelect
-                    v-model="selectedUserId"
-                    :options="userOptions"
-                    min-width="!w-36 sm:!w-44"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                    label="User"
-                    empty-option-label="User"
-                />
+                <div class="[&>div]:!mt-0">
+                    <MalioSelect
+                        v-model="selectedUserId"
+                        :options="userOptions"
+                        min-width="!w-36 sm:!w-44"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                        label="User"
+                        empty-option-label="User"
+                    />
+                </div>
 
-                <MalioSelect
-                    v-model="selectedProjectId"
-                    :options="projectOptions"
-                    empty-option-label="Tous"
-                    label="Projet"
-                    min-width="!w-36 sm:!w-44"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
+                <div class="[&>div]:!mt-0">
+                    <MalioSelect
+                        v-model="selectedProjectId"
+                        :options="projectOptions"
+                        empty-option-label="Tous"
+                        label="Projet"
+                        min-width="!w-36 sm:!w-44"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                </div>
 
-                <MalioSelect
-                    v-model="selectedTagId"
-                    :options="tagOptions"
-                    empty-option-label="Tous"
-                    label="Tag"
-                    min-width="!w-36 sm:!w-44"
-                    text-field="text-sm"
-                    text-value="text-sm"
-                />
+                <div class="[&>div]:!mt-0">
+                    <MalioSelect
+                        v-model="selectedTagId"
+                        :options="tagOptions"
+                        empty-option-label="Tous"
+                        label="Tag"
+                        min-width="!w-36 sm:!w-44"
+                        text-field="text-sm"
+                        text-value="text-sm"
+                    />
+                </div>
             </div>
         </div>