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

Merged

kyuno merged 1 commit from feat/mobile-cooking-session into main

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

kyuno commented

2026-09-07 16:49:26 +02:00

Owner

Contexte

cooking-session-page.scss n'avait encore aucune règle @media — premier vrai passage responsive pour cet écran.

Audit et corrections

Bug d'overflow réel dans l'onglet Recettes : .cooking-recipes__name n'avait aucune borne dans sa ligne flex (contrairement à .recipe-chip__name, son équivalent côté planning) — un nom de recette long pouvait repousser le badge de portions et le chevron hors de la case, silencieusement coupés par le overflow: hidden de la carte parente. Même traitement flex:1/min-width:0/ellipsis que son équivalent.
Cibles tactiles sous le breakpoint phone : cartes de tâches (.cooking-task — l'action principale et répétée de tout l'onglet Plan), nœuds du stepper, onglets, ligne de l'onglet Recettes, boutons Précédent/Suivant — tous à --space-md pour dépasser confortablement les 48dp minimums d'Android (l'app est Android-only) même dans le pire cas (une tâche à une seule ligne, sans ustensiles).
Pas de minuteur sur cette page (vérifié) — rien à faire de ce côté malgré la mention dans le ticket d'origine.

Piège rencontré

Surcharger .cooking-task par un simple sélecteur de classe ne fonctionnait pas, silencieusement : la règle globale partagée label:has(> input[type="checkbox"]) (global.scss, utilisée par toutes les cartes à cocher de l'app) a une spécificité CSS plus élevée qu'il n'y paraît — l'argument de :has() compte comme un élément + un attribut. Corrigé en réutilisant le même niveau d'imbrication (.cooking-phase__tasks .cooking-task) que .cooking-task--done juste au-dessus dans le même fichier, qui contournait déjà ce problème pour la même raison.

Tests

Nouveau describe "Cooking session page (phone)" dans cooking-session-page.cy.ts — 2 tests (padding effectivement appliqué au niveau CSS calculé, troncature du nom de recette sans pousser le badge hors champ).
Suite complète : biome check, tsc -b --force, build, 146/146 e2e, 71/71 composants — tous verts.

Closes #89

🤖 Generated with Claude Code

## Contexte `cooking-session-page.scss` n'avait encore aucune règle `@media` — premier vrai passage responsive pour cet écran. ## Audit et corrections - **Bug d'overflow réel** dans l'onglet Recettes : `.cooking-recipes__name` n'avait aucune borne dans sa ligne flex (contrairement à `.recipe-chip__name`, son équivalent côté planning) — un nom de recette long pouvait repousser le badge de portions et le chevron hors de la case, silencieusement coupés par le `overflow: hidden` de la carte parente. Même traitement `flex:1`/`min-width:0`/ellipsis que son équivalent. - **Cibles tactiles** sous le breakpoint phone : cartes de tâches (`.cooking-task` — l'action principale et répétée de tout l'onglet Plan), nœuds du stepper, onglets, ligne de l'onglet Recettes, boutons Précédent/Suivant — tous à `--space-md` pour dépasser confortablement les 48dp minimums d'Android (l'app est Android-only) même dans le pire cas (une tâche à une seule ligne, sans ustensiles). - Pas de minuteur sur cette page (vérifié) — rien à faire de ce côté malgré la mention dans le ticket d'origine. ## Piège rencontré Surcharger `.cooking-task` par un simple sélecteur de classe ne fonctionnait pas, silencieusement : la règle globale partagée `label:has(> input[type="checkbox"])` (`global.scss`, utilisée par toutes les cartes à cocher de l'app) a une spécificité CSS plus élevée qu'il n'y paraît — l'argument de `:has()` compte comme un élément + un attribut. Corrigé en réutilisant le même niveau d'imbrication (`.cooking-phase__tasks .cooking-task`) que `.cooking-task--done` juste au-dessus dans le même fichier, qui contournait déjà ce problème pour la même raison. ## Tests - Nouveau describe `"Cooking session page (phone)"` dans `cooking-session-page.cy.ts` — 2 tests (padding effectivement appliqué au niveau CSS calculé, troncature du nom de recette sans pousser le badge hors champ). - Suite complète : `biome check`, `tsc -b --force`, `build`, 146/146 e2e, 71/71 composants — tous verts. Closes #89 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-07 16:49:26 +02:00

fix(cooking-session): premier passage responsive dédié à l'écran de cuisine (#89 )

CI / build (push) Successful in 2m35s

Details

CI / lint (push) Successful in 2m38s

Details

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

Details

CI / e2e (push) Successful in 9m17s

Details

CI / test (push) Failing after 16m14s

Details

CI / build-android (push) Has been skipped

Details

2b5ae6722a

cooking-session-page.scss n'avait encore aucune règle @media. Audit
dédié à cet écran (minuteur inexistant sur cette page — rien à faire
de ce côté, liste d'étapes, actions) :

- Bug d'overflow réel dans l'onglet Recettes : `.cooking-recipes__name`
  n'avait aucune borne dans sa ligne flex (contrairement au
  `.recipe-chip__name` équivalent côté planning) — un nom de recette
  long pouvait repousser le badge de portions et le chevron hors de la
  case (silencieusement coupés par le `overflow: hidden` de la carte
  parente). Corrigé avec le même traitement flex:1/min-width:0/
  ellipsis que son équivalent.

- Cibles tactiles sous le breakpoint phone : les cartes de tâches (`.
  cooking-task`, l'action principale et répétée de tout l'onglet Plan),
  les nœuds du stepper, les onglets, la ligne de l'onglet Recettes et
  les boutons Précédent/Suivant passent tous à --space-md pour dépasser
  confortablement les 48dp minimums d'Android (l'app est Android-only)
  même dans le pire cas (une tâche à une seule ligne, sans ustensiles).

- Piège rencontré : surcharger `.cooking-task` par un simple sélecteur
  de classe ne fonctionnait pas silencieusement — la règle globale
  partagée `label:has(> input[type="checkbox"])` (global.scss) a une
  spécificité CSS plus élevée qu'il n'y paraît (l'argument de :has()
  compte comme un élément + un attribut). Corrigé en réutilisant le
  même niveau d'imbrication que `.cooking-phase__tasks .cooking-task
  --done` juste au-dessus dans le même fichier, qui contournait déjà
  ce problème pour la même raison.

Couverture Cypress : nouveau describe "Cooking session page (phone)"
dans cooking-session-page.cy.ts (2 tests — padding effectivement
appliqué + troncature du nom de recette sans pousser le badge hors
champ). Suite complète : biome check, tsc -b --force, build, 146/146
e2e, 71/71 composants — tous verts.

Closes #89

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