[UI mobile] Session de cuisine : passe mobile #89

New issue

Closed

opened 2026-09-07 11:33:26 +02:00 by kyuno · 0 comments

kyuno commented

2026-09-07 11:33:26 +02:00

Owner

Résumé

cooking-session-page.scss n'a aujourd'hui aucune règle @media —
premier vrai passage responsive pour cet écran. Fait partie du chantier
"UI mobile & tablette" (voir le ticket socle de ce même chantier).

Contexte

L'onglet et le stepper de phases (&__tabs, .cooking-stepper) scrollent
déjà horizontalement sur un viewport étroit, mais par un pattern flex
générique utilisé partout dans l'app (overflow-x: auto), pas par un choix
mobile délibéré — aucun renforcement de cibles tactiles ni de
réorganisation n'a été fait pour cet écran spécifiquement (contrairement à
planning-page.scss, qui a au moins ce dernier point pour ses propres
contrôles).

Contenu attendu

Premier audit + passage responsive dédié à cet écran : vérifier chaque
zone (minuteur, liste d'étapes, actions) sous le breakpoint phone, ajouter
les règles manquantes (espacement, taille des cibles tactiles, tout
élément qui déborderait). Portée exacte à affiner en implémentation une
fois l'écran testé en conditions réelles (viewport téléphone, via le
ticket Cypress du même chantier).

Dépendances

Dépend du ticket socle (breakpoints nommés + nav).

## Résumé `cooking-session-page.scss` n'a aujourd'hui aucune règle `@media` — premier vrai passage responsive pour cet écran. Fait partie du chantier "UI mobile & tablette" (voir le ticket socle de ce même chantier). ## Contexte L'onglet et le stepper de phases (`&__tabs`, `.cooking-stepper`) scrollent déjà horizontalement sur un viewport étroit, mais par un pattern flex générique utilisé partout dans l'app (`overflow-x: auto`), pas par un choix mobile délibéré — aucun renforcement de cibles tactiles ni de réorganisation n'a été fait pour cet écran spécifiquement (contrairement à `planning-page.scss`, qui a au moins ce dernier point pour ses propres contrôles). ## Contenu attendu Premier audit + passage responsive dédié à cet écran : vérifier chaque zone (minuteur, liste d'étapes, actions) sous le breakpoint phone, ajouter les règles manquantes (espacement, taille des cibles tactiles, tout élément qui déborderait). Portée exacte à affiner en implémentation une fois l'écran testé en conditions réelles (viewport téléphone, via le ticket Cypress du même chantier). ## Dépendances Dépend du ticket socle (breakpoints nommés + nav).