Statut : 🟢 · Impact : 🟡 · Zone : frontend (mobile, ≤ 768 px) Fichiers : frontend/index.html, frontend/js/config.js, frontend/style.css, frontend/locales/{fr,en}.json, tests/frontend/config-mobile.test.mjs, tests/e2e/config-mobile.spec.js.

Contexte

La page Configurations (#config-modal) était utilisable en mobile seulement partiellement (correctifs BUG-071) : le sommaire s'ouvrait en bloc haut, la modale n'était pas plein écran, les cibles tactiles étaient sous 44 px, le clavier virtuel iOS zoomait les champs, la rangée « Sauvegarder » disparaissait au scroll et plusieurs dettes HTML/i18n étaient restées en place.

Ce qui a été livré

A. Sommaire en drawer coulissant

#config-nav devient un panneau coulissant gauche (position: fixed, width: min(320px, 88vw), z-index: 40) sous un fond assombri (#config-modal.config-toc-open::before, z-index: 35).
Ouverture/fermeture pilotée par la classe .config-toc-open sur #config-modal (JS _setConfigNav) + un display inline conservé pour le contrat de reset.
Bouton #config-toc-close (classe .help-toc-close, aria-label config.toc_close) dans l'en-tête du drawer ; visible uniquement dans le drawer de la config (masqué sur desktop où la nav est toujours visible).
Backdrop : un tap hors du drawer ferme d'abord le drawer, pas la modale (e.target === modal → config-toc-open présent → _setConfigNav(false)).
Échap : ferme le drawer d'abord, puis la modale.
Fermeture de la modale (closeConfigModal) nettoie toujours la classe config-toc-open et le display inline (aucun fond ne subsiste).
Animation config-toc-slide-in (translateX) à l'ouverture.

B. Modale plein écran

#config-modal : padding: 0, .editor-container en 100vw × 100dvh (100dvh = hauteur du viewport dynamique, tient compte de la barre du navigateur mobile), border-radius: 0, border: none.
Le contenu (#config-scroll) garde son scroll propre ; le sous-bloc .config-content reçoit un padding-bottom: 80 px pour ne jamais passer sous la rangée sticky.

C. Cibles tactiles ≥ 44 px & anti-zoom iOS

Champs : .config-input, .config-select, .help-nav-search, .profile-field .config-input/.config-select → min-height: 44px + font-size: 16px (anti-zoom iOS : un font-size < 16px déclenche le zoom automatique au focus). La règle est scoppée #config-modal pour ne pas écraser .mfa-code-input (qui a sa propre typographie).
Boutons : .config-btn-save, .config-btn-secondary, .config-btn-primary, .config-btn-danger, .config-btn-add, .config-btn-sm, .mfa-link-btn, .theme-action-btn, .profile-avatar-actions .config-btn-secondary, .editor-btn (fermer), #config-hamburger, #config-toc-close, .help-search-clear → min-height/min-width: 44px.
Liens du sommaire : .help-nav-link → min-height: 44px (ligne tactile confortable).
.help-hamburger passe de 36 px à 44 px en mobile (règle partagée avec le modal d'aide).

D. Rangée « Sauvegarder » sticky

.config-actions-row (dans #cfg-backend-settings) → position: sticky; bottom: 0, empilée verticalement (flex-direction: column), boutons pleine largeur 44 px, fond opaque + bordure, padding-bottom avec env(safe-area-inset-bottom) (barre home iOS).
La rangée reste visible pendant le scroll de la section backend ; le padding-bottom: 80px de .config-content garantit qu'elle ne masque jamais les derniers contrôles.

E. Formulaires 1 colonne & grilles

.config-row → 1 colonne (grid-template-columns: 1fr), .config-input--num pleine largeur, text-align: left.
.ai-default-grid / .ai-provider-fields → 1 colonne.
Add-rows (.config-add-row, .config-add-pattern) → wrap + largeurs inline (180/140/100px) neutralisées (width: auto !important).
Items webhook/token/share → wrap ; URLs/méta sur leur propre ligne (overflow-wrap: anywhere) ; boutons de suppression 44 px.
.hidden-files-add-row → wrap, input pleine largeur.
.config-diag-row → wrap.
.profile-avatar-row → wrap ; .profile-form → max-width: 100%.
.webauthn-key-item → wrap ; .webauthn-key-label → pleine largeur.
.theme-grid reste en auto-fill minmax(160px, 1fr) (déjà responsive).

F. MFA & sécurité

.mfa-recovery-list → 1 colonne en mobile (2 colonnes illisibles à 360 px).
.mfa-verify-section, .mfa-recovery-actions, .mfa-disable-actions → wrap ; champs/boutons enfants en pleine largeur.
.mfa-code-input → width: 100%, max-width: 320px, letter-spacing: 6px (au lieu de 12 px qui débordait), min-height: 52px.
.mfa-secret-code → word-break: break-all (secret TOTP long).
.mfa-code-input-group → wrap.
Règle morte .mfa-recovery-input supprimée (auth.js utilise mfa-code-input recovery-input).

G. Dettes HTML corrigées

.config-actions-row (Sauvegarder / Réindexer / Réinitialiser) déplacée dans #cfg-backend-settings (elle était hors de toute section → le sticky n'avait pas de conteneur de scroll fiable) ; </section> orphelin supprimé.
Id dupliqué cfg-partages-publics retiré du <h2> (l'id reste sur la <section>, cf. #113).
Conteneur mort #plugins-settings-container supprimé (le rendu réel est #cfg-plugins via plugins.js).
Sections plugins/about ré-indentées.
#mt-explorer : libellé brut settings.search remplacé par <span data-i18n="settings.explorer"> (i18n correct, FR « Explorateur » / EN « Files »).
Doublons CSS .config-btn-add (3 définitions) réduits à la définition de référence.

H. i18n FR/EN

Purge des clés mortes (aucune référence HTML/JS/tests/backend) : settings.backend, settings.backend_hint, settings.restart_badge, settings.save, settings.plugins.
Ajouts : settings.explorer (FR « Explorateur » / EN « Files »), config.toc_close (FR « Fermer le sommaire » / EN « Close contents »).
Correctif : settings.tabs en FR était le mot anglais « Tabs » → « Onglets » (EN reste « Tabs »).
Clés vivantes conservées : settings.reindex, settings.no_restart_badge, settings.backend_section, settings.security, settings.search, settings.tabs, settings.search_placeholder.

Tests

Statics — `tests/frontend/config-mobile.test.mjs` (27, au CI)

BUG-071a–e (hamburger, toggle JS, grilles/wrap, ancres mortes, data-i18n-attr multi-paires) — conservés et adaptés au drawer.
#114a : #config-toc-close présent + i18n ; _setConfigNav bascule .config-toc-open ; backdrop ::before (z-index 35) ; .help-toc-close masqué sur desktop / visible dans le drawer ; Échap et backdrop ferment le drawer d'abord ; closeConfigModal nettoie la classe.
#114b : modale 100dvh + padding: 0 ; inputs/selects 16px + 44px ; boutons 44px ; rangée sticky (position: sticky + flex-direction: column + safe-area) ; MFA 1 colonne + wrap + code full-width ; .config-actions-row bien dans #cfg-backend-settings.
#114i18n : clés mortes purgées ; settings.explorer FR/EN ; settings.tabs FR = « Onglets » ; #mt-explorer porte data-i18n="settings.explorer" ; #plugins-settings-container absent.

E2E — `tests/e2e/config-mobile.spec.js` (5, projet `chromium-mobile`)

Hamburger → drawer position: fixed + classe config-toc-open sur la modale.
Bouton #config-toc-close et tap backdrop ferment le drawer sans fermer la modale.
Sélection d'une section → scroll doux + lien actif + repli du drawer.
Modale plein écran (largeur/hauteur ≈ viewport) + #config-hamburger, #config-close et #cfg-save-backend ≥ 44 px.
Aucun débordement horizontal à 393 px (sections IA / tokens / webhooks / partages).

Détails d'implémentation notables

Spécificité CSS : les règles #config-modal #config-nav (2 ids) priment sur les règles génériques .help-nav / body .help-nav qui masquent la nav en mobile — pas besoin de !important.
Backdrop = pseudo-élément : les clics sur ::before sont attribués à l'élément or (#config-modal), donc le handler e.target === modal existant fonctionne sans node supplémentaire.
Contrat de reset conservé : configNavOnOpen.style.display = '' à l'ouverture (test statique BUG-071b) — le CSS reprend la main (drawer masqué par défaut sur mobile).
100dvh avec repli 100vh : les navigateurs sans support dvh gardent le comportement précédent.
La règle .help-hamburger { display: inline-flex } du bloc mobile du modal d'aide est partagée (44 px) ; le drawer de la config double avec #config-modal .help-hamburger pour rester robuste à un réordonnancement des règles.

8.9 KiB Raw Permalink Blame History Unescape Escape

#114 — Configuration — refonte mobile-responsive de la section Settings