[UI mobile] Liste de courses et catalogue de recettes : renforcement mobile #90

New issue

Closed

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

kyuno commented

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

Owner

Résumé

Deux correctifs mobiles plus petits, regroupés dans un seul ticket pour ne
pas multiplier les tickets à faible enjeu. Fait partie du chantier "UI
mobile & tablette" (voir le ticket socle de ce même chantier).

1. Liste de courses

apps/web/src/pages/shopping-list/shopping-list-page.scss n'a aucune
règle @media. La structure (liste groupée en flex/colonne,
.shopping-list__item) est déjà saine et ne déborde pas structurellement —
il manque surtout un passage sur la taille des cibles tactiles (cases à
cocher, boutons de suppression) sous le breakpoint phone, dans le même
esprit que ce que planning-page.scss a déjà fait pour ses propres
contrôles.

2. Catalogue de recettes

apps/web/src/features/recipes/recipes.scss — c'est déjà la page la mieux
couverte du repo côté responsive (un vrai breakpoint tablette à 1024px qui
effondre le split table+panneau de détail en une colonne). Mais
RecipeTable (le tableau lui-même, dans .recipe-table-wrap) n'a
aucun garde-fou de scroll horizontal (overflow-x), contrairement à la
grille planning — ses colonnes se compressent au lieu de scroller sur un
viewport étroit. RecipePickerDialog hérite déjà d'une collapse à 640px
pour sa propre instance du catalogue ; seul le tableau du catalogue
"plein" reste à vérifier/durcir.

Dépendances

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

## Résumé Deux correctifs mobiles plus petits, regroupés dans un seul ticket pour ne pas multiplier les tickets à faible enjeu. Fait partie du chantier "UI mobile & tablette" (voir le ticket socle de ce même chantier). ## 1. Liste de courses `apps/web/src/pages/shopping-list/shopping-list-page.scss` n'a aucune règle `@media`. La structure (liste groupée en flex/colonne, `.shopping-list__item`) est déjà saine et ne déborde pas structurellement — il manque surtout un passage sur la taille des cibles tactiles (cases à cocher, boutons de suppression) sous le breakpoint phone, dans le même esprit que ce que `planning-page.scss` a déjà fait pour ses propres contrôles. ## 2. Catalogue de recettes `apps/web/src/features/recipes/recipes.scss` — c'est déjà la page la mieux couverte du repo côté responsive (un vrai breakpoint tablette à 1024px qui effondre le split table+panneau de détail en une colonne). Mais `RecipeTable` (le tableau lui-même, dans `.recipe-table-wrap`) n'a **aucun** garde-fou de scroll horizontal (`overflow-x`), contrairement à la grille planning — ses colonnes se compressent au lieu de scroller sur un viewport étroit. `RecipePickerDialog` hérite déjà d'une collapse à 640px pour sa propre instance du catalogue ; seul le tableau du catalogue "plein" reste à vérifier/durcir. ## Dépendances Dépend du ticket socle (breakpoints nommés).