fix

holidays.php

@@ -44,7 +44,8 @@ if ($tab === 'holiday_detail' && isset($_GET['id'])) {
 <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/cat.js"></script>
 
 <?php
-// On ajoute un paramètre de version (time) pour forcer le navigateur à recharger tes récentes modifications dans holidays.js
-echo '<script src="/modules/holidays/holidays.js?v=' . time() . '"></script>';
+$jsPath = __DIR__ . '/modules/holidays/holidays.js';
+$jsVersion = file_exists($jsPath) ? filemtime($jsPath) : time();
+echo '<script src="/modules/holidays/holidays.js?v=' . $jsVersion . '"></script>';
 
 require __DIR__ . '/footer.php';

modules/holidays/holidays.css

@@ -584,13 +584,19 @@ body.no-scroll {
   }
 
   /* Modale 100% écran avec scroll natif fluide */
+  .pf-modal {
+    padding: 0 !important; /* Retire le padding global pour faire un vrai plein écran */
+  }
+
   .pf-modal-content {
     padding: 16px;
-    width: 100%;
-    height: 100%;
-    max-height: 100vh;
-    border-radius: 0;
+    width: 100% !important;
+    height: 100dvh !important; /* Utilise la hauteur dynamique (prend en compte la barre d'URL du tel) */
+    max-height: 100dvh !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
     overflow-y: auto;
+    overscroll-behavior-y: contain; /* Empêche le scroll de se propager au body (fond) */
     -webkit-overflow-scrolling: touch;
   }
 
@@ -1176,7 +1182,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
 .hol-calendar-zone .hol-drag-item {
   position: absolute;
   top: 1px;
-  left: 45px;
+  left: 52px; /* Dégage l'espace pour lire l'heure proprement */
   right: 5px;
   height: calc(60px * var(--duration) - 2px);
 }
@@ -1656,7 +1662,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
 @media (max-width: 768px) {
   /* --- MODALE GLOBALE --- */
   #planningModal .pf-modal-content {
-    padding: 8px !important;
+    padding: 6px !important;
     height: 98vh !important;
     max-height: 98vh !important;
     display: flex !important;
@@ -1684,9 +1690,9 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
   /* --- 1. LE CALENDRIER (EN HAUT) --- */
   .hol-calendar-zone {
     width: 100% !important;
-    flex: 1 1 auto !important; /* Le calendrier prend tout l'espace restant */
+    flex: 1 1 auto !important;
     order: 1 !important;
-    padding-bottom: 10px !important;
+    padding-bottom: 35vh !important;
     margin-top: 0 !important;
     gap: 6px !important;
   }
@@ -1722,7 +1728,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
   /* --- 2. LA ZONE "À PLACER" (BOTTOM SHEET - 30%) --- */
   .hol-unmapped-zone {
     width: 100% !important;
-    height: 30vh !important; /* 🔼 Prend exactement 30% de l'écran */
+    height: 35vh !important; /* 🔼 Prend exactement 30% de l'écran */
     min-height: 180px !important;
     flex: 0 0 auto !important; /* 🛡️ Protection anti-écrasement */
     order: 2 !important;
@@ -1732,8 +1738,8 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
     border-left: none !important;
     border-right: none !important;
     box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15) !important;
-    margin: 0 -8px -8px -8px !important;
-    padding: 12px 10px 15px 10px !important;
+    margin: 0px !important;
+    padding: 6px !important;
     z-index: 100;
     background: var(--bg-panel) !important;
     display: flex !important;

modules/holidays/holidays.js

@@ -1411,12 +1411,14 @@ function buildDragItemHtml(it) {
              style="--duration: ${dur}; flex-shrink: 0; ${bgStyle} padding: 8px 10px; border-radius: 6px; cursor: grab; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s; z-index: 10;"
              ondragstart="dragStart(event)" ondragend="dragEnd(event)" onclick="handleItemTap(event, '${htmlId}')">
             ${locHintHtml}
-            <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;">
-                <div class="hol-drag-title" style="flex:1; font-size: 0.85rem; font-weight: 700; color: var(--text-main); line-height:1.2;">${visualName}</div>
-                <div style="display:flex; align-items:center;">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap;">
+                <div class="hol-drag-title" style="flex:1; min-width: 110px; font-size: 0.85rem; font-weight: 700; color: var(--text-main); line-height:1.2;">${visualName}</div>
+                
+                <div style="display:flex; align-items:center; flex-shrink: 0; margin-left: auto;">
                     <div class="hol-item-duration-controls" style="display:flex; align-items:center; background:var(--bg-subtle); border-radius:4px; border:1px solid var(--border-light);">
                         ${durControls}
                     </div>
+                    <!-- 🔄 Le fameux bouton d'annulation (Géré par CSS) -->
                     <button type="button" class="hol-unplace-btn" onclick="unplaceItem(event, '${htmlId}')" title="Retirer du planning">↩️</button>
                 </div>
             </div>

modules/holidays/views/detail.php

@@ -596,4 +596,3 @@ $pctSaved = $cost > 0 ? min(100 - $pctPaid, ($saved / $cost) * 100) : 0;
 
 <?php include __DIR__ . '/pdf_template.php'; ?>
 
-<script src="/modules/holidays/holidays.js?v=<?= time() ?>"></script>

modules/holidays/views/list.php

@@ -125,7 +125,6 @@ window.closeHolidayModal = window.closeHolidayModal || function() {
 
 
 </script>
-<script src="/modules/holidays/holidays.js"></script>
 
 
 <?php