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

Merged

kyuno merged 1 commit from feat/mobile-shopping-recipes into main

2026-09-07 17:39:56 +02:00

kyuno commented

2026-09-07 17:03:09 +02:00

Owner

1. Catalogue de recettes

.recipe-table-wrap n'avait aucun garde-fou de scroll horizontal, contrairement à la grille planning — sur un viewport étroit, les 4 colonnes (photo/nom/allergènes/régimes) se compressaient au lieu de scroller. Ajout d'overflow-x: auto sur le wrapper + min-width: 36rem sur la table (échelle réduite par rapport aux 62rem de la grille planning : 4 colonnes plus étroites, pas 7, et les badges eux-mêmes savent déjà wrapper). Partagé par le catalogue complet et RecipePickerDialog, qui hérite du même correctif au passage — même bug, même fix, gratuitement.

2. Liste de courses

Audit dédié à cet écran : la page n'a en réalité aucune case à cocher ni bouton de suppression — elle est volontairement en lecture seule (voir le commentaire de ShoppingListPage.tsx), contrairement à ce que supposait le ticket d'origine (écrit avant relecture du code réel). Rien à agrandir comme cible tactile de ce côté. La structure ne déborde déjà pas non plus (&-name a déjà flex:1/min-width:0).

Amélioration retenue à la place, plus modeste mais réelle : une ligne un peu plus aérée et une icône plus grande sous le breakpoint phone, pour une lecture plus confortable en faisant les courses (liste tenue d'une main, coups d'œil répétés en poussant un chariot).

Tests

Nouveau describe "Recipe catalog (phone)" dans recipes.cy.ts — le garde-fou de scroll horizontal est effectivement actif (computed style + scrollWidth > clientWidth).
Nouveau fichier shopping-list-page.cy.ts — spec layout simple (pas Gherkin, cette page n'avait pas encore ce type de fichier) pour le padding de ligne.
Suite complète : biome check, tsc -b --force, build, 146/146 e2e, 71/71 composants — tous verts (un skip ponctuel de TechStepCorrectionPopover en run groupé, reconfirmé 10/10 isolément, flake local sans lien avec ce ticket).

Closes #90

🤖 Generated with Claude Code

## 1. Catalogue de recettes `.recipe-table-wrap` n'avait aucun garde-fou de scroll horizontal, contrairement à la grille planning — sur un viewport étroit, les 4 colonnes (photo/nom/allergènes/régimes) se compressaient au lieu de scroller. Ajout d'`overflow-x: auto` sur le wrapper + `min-width: 36rem` sur la table (échelle réduite par rapport aux 62rem de la grille planning : 4 colonnes plus étroites, pas 7, et les badges eux-mêmes savent déjà wrapper). Partagé par le catalogue complet **et** `RecipePickerDialog`, qui hérite du même correctif au passage — même bug, même fix, gratuitement. ## 2. Liste de courses Audit dédié à cet écran : la page n'a en réalité **aucune case à cocher ni bouton de suppression** — elle est volontairement en lecture seule (voir le commentaire de `ShoppingListPage.tsx`), contrairement à ce que supposait le ticket d'origine (écrit avant relecture du code réel). Rien à agrandir comme cible tactile de ce côté. La structure ne déborde déjà pas non plus (`&-name` a déjà `flex:1`/`min-width:0`). Amélioration retenue à la place, plus modeste mais réelle : une ligne un peu plus aérée et une icône plus grande sous le breakpoint phone, pour une lecture plus confortable en faisant les courses (liste tenue d'une main, coups d'œil répétés en poussant un chariot). ## Tests - Nouveau describe `"Recipe catalog (phone)"` dans `recipes.cy.ts` — le garde-fou de scroll horizontal est effectivement actif (computed style + `scrollWidth > clientWidth`). - Nouveau fichier `shopping-list-page.cy.ts` — spec layout simple (pas Gherkin, cette page n'avait pas encore ce type de fichier) pour le padding de ligne. - Suite complète : `biome check`, `tsc -b --force`, `build`, 146/146 e2e, 71/71 composants — tous verts (un skip ponctuel de `TechStepCorrectionPopover` en run groupé, reconfirmé 10/10 isolément, flake local sans lien avec ce ticket). Closes #90 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-07 17:03:10 +02:00

fix(mobile): renforce le catalogue de recettes et la liste de courses sur mobile (#90 )

CI / lint (push) Successful in 3m2s

Details

CI / build (push) Successful in 3m5s

Details

CI / intent-service-test (push) Successful in 5m14s

Details

CI / e2e (push) Successful in 9m38s

Details

CI / test (push) Failing after 18m46s

Details

CI / build-android (push) Has been skipped

Details

7d1a69cf12

Deux correctifs, regroupés en un seul ticket comme prévu :

- Catalogue de recettes (`recipes.scss`) : `.recipe-table-wrap` n'avait
  aucun garde-fou de scroll horizontal, contrairement à la grille
  planning — sur un viewport étroit, les 4 colonnes (photo/nom/
  allergènes/régimes) se compressaient au lieu de scroller. Ajout
  d'`overflow-x: auto` sur le wrapper + `min-width: 36rem` sur la
  table (échelle réduite par rapport aux 62rem de la grille planning :
  4 colonnes plus étroites, pas 7). Partagé par le catalogue complet
  ET par `RecipePickerDialog`, qui hérite du même correctif au passage.

- Liste de courses (`shopping-list-page.scss`) : audit dédié — la page
  n'a en réalité aucune case à cocher ni bouton de suppression (elle
  est volontairement en lecture seule, voir le commentaire de
  ShoppingListPage.tsx), contrairement à ce que supposait le ticket
  d'origine ; rien à agrandir comme cible tactile de ce côté. La
  structure ne déborde déjà pas non plus (`&-name` a déjà flex:1/
  min-width:0). Amélioration retenue à la place : une ligne un peu
  plus aérée et une icône plus grande sous le breakpoint phone, pour
  une lecture plus confortable en faisant les courses (liste tenue
  d'une main, coups d'œil répétés).

Couverture Cypress : nouveau describe "Recipe catalog (phone)" dans
recipes.cy.ts (garde-fou de scroll horizontal effectivement actif) ;
nouveau fichier shopping-list-page.cy.ts, spec layout simple (pas
Gherkin, cette page n'a pas encore ce type de fichier) pour le padding
de ligne. Suite complète : biome check, tsc -b --force, build, 146/146
e2e, 71/71 composants (un skip ponctuel de TechStepCorrectionPopover
en run groupé, reconfirmé 10/10 isolément — flake local sans lien avec
ce ticket) — tous verts.

Closes #90

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>