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')"