fix: page Configurations inutilisable en mode mobile BUG-071

frontend/style.css

@@ -4723,6 +4723,82 @@ body.resizing-v {
   }
 }
 
+/* BUG-071: Configurations modal — mobile usability (viewport ≤ 768px).
+   #config-nav shares the .help-nav rule that hides it, but the config modal
+   had no toggle (unlike the help modal): the header hamburger
+   (#config-hamburger, same .help-hamburger treatment) reveals it as a
+   collapsible top block. Two-column grids and fixed-width add-rows are
+   stacked/wrapped so nothing overflows a 360px viewport. */
+@media (max-width: 768px) {
+  /* TOC as a collapsible top block (JS toggles inline display flex/none,
+     which wins over the hiding rule); the list scrolls within a capped nav. */
+  #config-modal #config-nav {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    max-height: 46vh;
+  }
+  /* Two-column grids → single column. */
+  #config-modal .ai-default-grid,
+  #config-modal .ai-provider-fields {
+    grid-template-columns: 1fr;
+  }
+  /* Add-rows (tokens, webhooks, tag filters) wrap instead of overflowing. */
+  #config-modal .config-add-row,
+  #config-modal .config-add-pattern {
+    flex-wrap: wrap;
+  }
+  #config-modal .config-add-row .config-input,
+  #config-modal .config-add-pattern .config-input,
+  #config-modal .config-add-row .config-select {
+    flex: 1 1 140px;
+    width: auto !important; /* override fixed inline widths (180/140/100px) */
+    min-width: 0;
+  }
+  #config-modal .config-add-row .config-btn-add,
+  #config-modal .config-add-pattern .config-btn-add {
+    flex: 1 1 auto;
+    min-height: 44px;
+  }
+  /* Webhook / token / share rows wrap; long URLs and meta take their own
+     line instead of squeezing the delete control off-screen. */
+  #config-modal .webhook-item,
+  #config-modal .token-item,
+  #config-modal .share-item {
+    flex-wrap: wrap;
+  }
+  #config-modal .webhook-url,
+  #config-modal .token-meta,
+  #config-modal .share-url {
+    flex: 1 1 100%;
+    min-width: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+  #config-modal .webhook-delete,
+  #config-modal .token-delete,
+  #config-modal .share-revoke {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  /* Sticky AI-keys footer: full-width touch-friendly buttons. */
+  #config-modal .ai-keys-footer .config-btn-save,
+  #config-modal .ai-keys-footer .config-btn-secondary {
+    flex: 1 1 100%;
+    min-height: 44px;
+  }
+  /* Long inline code in tips (ex. MCP usage snippet) must wrap. */
+  #config-modal .qh-tip {
+    flex-wrap: wrap;
+  }
+  #config-modal .qh-tip span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+}
+
 /* --- Toast notifications --- */
 .toast-container {
   position: fixed;