Feat : addapt for phone

packages/web/src/styles.css

@@ -1093,3 +1093,106 @@ fieldset.group > legend {
   background: #4a1717;
   border-color: #7f1d1d;
 }
+
+/* --- Téléphone ---
+ *
+ * Rien ci-dessous ne redéfinit une règle qui s'appliquerait aussi au-dessus
+ * de ce seuil : le bureau, mis au point avec la mise en page normale
+ * (`.row` sans retour à la ligne, grilles à colonnes fixes, modales larges),
+ * reste inchangé. En dessous, ces mêmes choix redeviennent un problème —
+ * une rangée de champs qui refuse de s'empiler force un défilement horizontal
+ * de toute la modale, et une grille à colonnes de 330px minimum déborde d'un
+ * écran de 320-360px — d'où les correctifs.
+ */
+@media (max-width: 720px) {
+  body {
+    /* Filet de sécurité : le seul défilement horizontal voulu (la frise, via
+       `.timeline-scroll`) reste confiné à sa propre boîte ; la page elle-même
+       ne doit jamais avoir à le faire. */
+    overflow-x: hidden;
+  }
+
+  /* Sans ça, Safari iOS zoome automatiquement à la mise au point de tout
+     champ dont le texte affiche moins de 16px — la taille de base (14px)
+     déclenche ce zoom sur chaque formulaire. */
+  input,
+  select,
+  textarea {
+    font-size: 16px;
+  }
+
+  button {
+    padding: 9px 14px;
+  }
+
+  .topbar {
+    padding: 10px 12px;
+    gap: 8px;
+  }
+  .tabs {
+    flex-wrap: wrap;
+  }
+  .topbar-actions button {
+    flex: 1 1 auto;
+  }
+
+  .modal-backdrop {
+    padding: 8px;
+  }
+  .modal-head,
+  .modal-foot {
+    padding: 12px 14px;
+  }
+  .modal-body {
+    padding: 14px;
+  }
+
+  .page,
+  .grid {
+    padding: 12px;
+  }
+
+  /* Les rangées de champs (formulaire de configuration, boutons d'action)
+     empilent plutôt que de forcer la modale entière à défiler latéralement. */
+  .row,
+  .danger-zone {
+    flex-wrap: wrap;
+  }
+  .field.small-field {
+    width: auto;
+    flex: 1 1 100px;
+  }
+
+  /* Trois colonnes fixes (heure, agent, message) laissent trop peu de place
+     au message une fois l'écran étroit : chaque entrée devient une pile. */
+  .log-line,
+  .history-line {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 6px 0;
+    border-bottom: 1px solid var(--border);
+  }
+  .history-icon {
+    text-align: left;
+  }
+}
+
+@media (max-width: 420px) {
+  /* Une grille à colonnes de 330px minimum déborde d'un écran plus étroit
+     que ça — la largeur minimale par défaut ne s'adapte pas, elle déclenche
+     le défilement horizontal de toute la page. */
+  .grid,
+  .streamer-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .metrics {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .avatar-large {
+    width: 96px;
+    height: 96px;
+    flex: 0 0 96px;
+    font-size: 32px;
+  }
+}