[UI mobile] Grille planning : vue mobile dédiée #88

New issue

Closed

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

kyuno commented

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

Owner

Résumé

La grille hebdomadaire de planning (écran principal de l'app) est figée à
min-width: 62rem (~992px) — sous ce seuil elle ne se réorganise pas, elle
scrolle juste horizontalement. C'est un tableau desktop rétréci, pas un
vrai écran mobile. Fait partie du chantier "UI mobile & tablette" (voir le
ticket socle de ce même chantier) — le plus gros ticket page par page de
ce chantier, l'écran principal de l'app.

Contexte

apps/web/src/pages/planning/planning-page.scss :
table.planning-grid { min-width: 62rem; ...; table-layout: fixed },
.planning-grid-wrapper { overflow: auto } — le commentaire déjà présent
dans le fichier reconnaît explicitement ce choix ("dégrade gracieusement...
scrolle plutôt que d'écraser sept colonnes en illisible"). Le seul bloc
@media (max-width: 640px) existant ne fait que du renforcement de cibles
tactiles (bouton de suppression d'un chip, bouton "+"), pas une
réorganisation de la grille elle-même.

Contenu attendu

Sous le breakpoint phone (nommé, ticket socle) : une vraie disposition
mobile de la grille, pas un scroll horizontal d'un tableau 7 colonnes.
Piste probable (à confirmer en implémentation, pas figée ici) : une vue
"un jour à la fois" avec un sélecteur de jour, cohérente avec les patterns
déjà présents dans l'app (week-navigator). Doit rester une adaptation de
la MÊME donnée/logique métier (les hooks/état de PlanningPage.tsx), pas
une réécriture de la logique de planning — seule la présentation change
sous ce breakpoint.

Dépendances

Dépend du ticket socle (nav) et idéalement du ticket "Tests Cypress
ciblant téléphone et tablette" (pour tester la nouvelle vue au fur et à
mesure de son implémentation).

## Résumé La grille hebdomadaire de planning (écran principal de l'app) est figée à `min-width: 62rem` (~992px) — sous ce seuil elle ne se réorganise pas, elle scrolle juste horizontalement. C'est un tableau desktop rétréci, pas un vrai écran mobile. Fait partie du chantier "UI mobile & tablette" (voir le ticket socle de ce même chantier) — le plus gros ticket page par page de ce chantier, l'écran principal de l'app. ## Contexte `apps/web/src/pages/planning/planning-page.scss` : `table.planning-grid { min-width: 62rem; ...; table-layout: fixed }`, `.planning-grid-wrapper { overflow: auto }` — le commentaire déjà présent dans le fichier reconnaît explicitement ce choix ("dégrade gracieusement... scrolle plutôt que d'écraser sept colonnes en illisible"). Le seul bloc `@media (max-width: 640px)` existant ne fait que du renforcement de cibles tactiles (bouton de suppression d'un chip, bouton "+"), pas une réorganisation de la grille elle-même. ## Contenu attendu Sous le breakpoint phone (nommé, ticket socle) : une vraie disposition mobile de la grille, pas un scroll horizontal d'un tableau 7 colonnes. Piste probable (à confirmer en implémentation, pas figée ici) : une vue "un jour à la fois" avec un sélecteur de jour, cohérente avec les patterns déjà présents dans l'app (`week-navigator`). Doit rester une adaptation de la MÊME donnée/logique métier (les hooks/état de `PlanningPage.tsx`), pas une réécriture de la logique de planning — seule la présentation change sous ce breakpoint. ## Dépendances Dépend du ticket socle (nav) et idéalement du ticket "Tests Cypress ciblant téléphone et tablette" (pour tester la nouvelle vue au fur et à mesure de son implémentation).