From ac615875f3d18f41388a2a44fd6a281979df6758 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Tue, 26 May 2026 11:02:09 +0200
Subject: [PATCH] =?UTF-8?q?fix(absences)=20:=20dates=20du=20drawer=20emplo?=
 =?UTF-8?q?y=C3=A9=20en=20pleine=20largeur=20(1=20par=20ligne)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dans le drawer « Informations employé », les champs Date d'embauche et
Date de sortie étaient sur une grille 2 colonnes : le popover du
calendrier MalioDate, coincé en demi-largeur, chevauchait le champ
voisin. Passage en pleine largeur (sm:col-span-2) pour laisser le
calendrier s'afficher correctement.
---
 .../components/absence/EmployeeDrawer.vue     | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/components/absence/EmployeeDrawer.vue b/frontend/components/absence/EmployeeDrawer.vue
index 3684da5..dc4acf7 100644
--- a/frontend/components/absence/EmployeeDrawer.vue
+++ b/frontend/components/absence/EmployeeDrawer.vue
@@ -7,16 +7,22 @@
             </div>
         </template>
         <form v-if="user" class="grid grid-cols-1 gap-4 sm:grid-cols-2" @submit.prevent="save">
-            <MalioDate
-                v-model="form.hireDate"
-                :label="$t('absences.admin.employees.fields.hireDate')"
-                group-class="w-full"
-            />
-            <MalioDate
-                v-model="form.endDate"
-                :label="$t('absences.admin.employees.fields.endDate')"
-                group-class="w-full"
-            />
+            <!-- Dates en pleine largeur (1 par ligne) : le popover du calendrier
+                 a besoin de toute la largeur pour s'afficher correctement. -->
+            <div class="sm:col-span-2">
+                <MalioDate
+                    v-model="form.hireDate"
+                    :label="$t('absences.admin.employees.fields.hireDate')"
+                    group-class="w-full"
+                />
+            </div>
+            <div class="sm:col-span-2">
+                <MalioDate
+                    v-model="form.endDate"
+                    :label="$t('absences.admin.employees.fields.endDate')"
+                    group-class="w-full"
+                />
+            </div>
             <MalioSelect
                 v-model="form.contractType"
                 :label="$t('absences.admin.employees.fields.contractType')"