vue mobile

modules/holidays/holidays.css

@@ -141,7 +141,7 @@ body.no-scroll {
 /* --- 4. CARTES --- */
 .hol-ideas-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
   gap: 24px;
   margin-bottom: 40px;
 }
@@ -459,48 +459,74 @@ body.no-scroll {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  /* On empile proprement les boutons d'action */
   .hol-title-actions {
     width: 100%;
+    flex-direction: column; /* Essentiel pour que les boutons width: 100% ne s'écrasent pas */
+    gap: 10px;
   }
   .hol-add-btn,
   .hol-map-toggle {
     width: 100%;
+    justify-content: center; /* Centre le texte et l'icône */
   }
+
   .form-row {
     flex-direction: column;
     gap: 10px;
   }
-  /* Sur mobile, les colonnes s'empilent */
+
   .hol-columns-wrapper {
     grid-template-columns: 1fr;
   }
 
+  /* Modale 100% écran avec scroll natif fluide */
   .pf-modal-content {
     padding: 16px;
     width: 100%;
     height: 100%;
     max-height: 100vh;
     border-radius: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
   }
-  @media (max-width: 768px) {
-    .hol-date-weather-wrapper {
-      gap: 6px; /* On rapproche la météo de la date sur mobile */
-    }
 
-    /* On aligne le haut de la carte au cas où le contenu passe sur 2 lignes */
-    .hol-cp-header {
-      align-items: flex-start;
-    }
+  /* Adaptation des lignes de budget sur mobile pour éviter qu'elles ne soient compressées */
+  .savings-line-item {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .savings-line-item input[type="text"] {
+    min-width: 100%; /* Le nom de la dépense prend toute la ligne */
+  }
+  .savings-line-item input[type="number"] {
+    flex-grow: 1; /* Le prix s'ajuste sur la 2ème ligne */
+  }
 
-    /* On autorise le titre et les dates à prendre la place nécessaire */
-    .hol-cp-info-group {
-      flex: 1;
-      min-width: 0; /* Empêche le flexbox de "déborder" de l'écran */
-    }
+  .hol-date-weather-wrapper {
+    gap: 6px;
+  }
 
-    .hol-cp-title {
-      white-space: normal; /* Permet au titre de l'étape de passer à la ligne si besoin */
-    }
+  .hol-cp-header {
+    align-items: flex-start;
+    flex-direction: column; /* On passe le titre et le prix l'un sous l'autre si besoin */
+  }
+
+  .hol-cp-info-group {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .hol-cp-title {
+    white-space: normal;
+  }
+
+  .hol-cp-actions-group {
+    width: 100%;
+    justify-content: flex-end;
+    margin-top: 8px;
   }
 }