fix(planning): affiche les recettes du picker sur mobile (#111) #112

Merged

kyuno merged 1 commit from fix/recipe-picker-dialog-mobile-empty into main

2026-09-08 01:35:53 +02:00

kyuno commented

2026-09-08 01:18:44 +02:00

Owner

Contexte

Closes #111.

Sur téléphone, le dialogue d'ajout d'une recette à un créneau du planning passait plein écran, mais .recipe-picker-dialog (recipe-picker-dialog.scss) gardait un height: 80vh figé qui l'emportait sur le plein écran de dialog.scss. Dans cette colonne flex de hauteur bornée, .recipe-picker__filters (rendu pour les 4 onglets non-source : recherche + pickers ingrédients/régimes + case foyer) prenait toute la place et .recipes-page__catalog (flex: 1 ⇒ flex-basis: 0) s'effondrait à ~0. La table des recettes restait dans le DOM mais dans un scrollport de hauteur nulle → onglets Favoris / Perso / Foyer / Publique vides. Les onglets « source » ne rendent pas .recipe-picker__filters, d'où le fait qu'ils n'étaient pas touchés.

Changements

recipe-picker-dialog.scss, sous @include bp.phone :
- le dialogue passe vraiment plein écran (height/max-height: 100vh), aligné sur dialog.scss, au lieu du pin 80vh ;
- .recipes-page__catalog : flex: none — il ne se bat plus pour un espace résiduel inexistant et prend sa hauteur de contenu ;
- .recipe-table-wrap : flex: none; height: auto — il scrolle avec le corps plutôt que de clipper dans un catalogue effondré ;
- .recipe-picker__filters : flex-shrink: 0 — jamais compressé.
- C'est désormais .dialog-panel__body (son propre overflow-y: auto) qui scrolle.
Aucun changement hors du breakpoint phone → desktop/tablette inchangés.

Tests

apps/web/cypress/e2e/planning-page.cy.ts : nouveau describe("Recipe picker dialog (phone)") — ouvre le picker depuis un créneau à 390 px et vérifie que .recipe-table est visible avec des lignes sur les 4 onglets non-source (be.visible échoue sur un élément de hauteur nulle, la forme exacte de la régression).
Local : pnpm lint OK, pnpm --filter web build OK, cypress run --spec cypress/e2e/planning-page.cy.ts → 11/11 (10 existants + le nouveau).
Suite complète (biome / tsc / build / e2e) : via la CI.

🤖 Generated with Claude Code

## Contexte `Closes #111`. Sur téléphone, le dialogue d'ajout d'une recette à un créneau du planning passait plein écran, mais `.recipe-picker-dialog` (`recipe-picker-dialog.scss`) gardait un `height: 80vh` figé qui l'emportait sur le plein écran de `dialog.scss`. Dans cette colonne flex de hauteur bornée, `.recipe-picker__filters` (rendu pour les 4 onglets non-source : recherche + pickers ingrédients/régimes + case foyer) prenait toute la place et `.recipes-page__catalog` (`flex: 1` ⇒ `flex-basis: 0`) s'effondrait à ~0. La table des recettes restait dans le DOM mais dans un scrollport de hauteur nulle → onglets **Favoris / Perso / Foyer / Publique** vides. Les onglets « source » ne rendent pas `.recipe-picker__filters`, d'où le fait qu'ils n'étaient pas touchés. ## Changements - `recipe-picker-dialog.scss`, sous `@include bp.phone` : - le dialogue passe vraiment plein écran (`height/max-height: 100vh`), aligné sur `dialog.scss`, au lieu du pin `80vh` ; - `.recipes-page__catalog` : `flex: none` — il ne se bat plus pour un espace résiduel inexistant et prend sa hauteur de contenu ; - `.recipe-table-wrap` : `flex: none; height: auto` — il scrolle avec le corps plutôt que de clipper dans un catalogue effondré ; - `.recipe-picker__filters` : `flex-shrink: 0` — jamais compressé. - C'est désormais `.dialog-panel__body` (son propre `overflow-y: auto`) qui scrolle. - Aucun changement hors du breakpoint phone → desktop/tablette inchangés. ## Tests - `apps/web/cypress/e2e/planning-page.cy.ts` : nouveau `describe("Recipe picker dialog (phone)")` — ouvre le picker depuis un créneau à 390 px et vérifie que `.recipe-table` est **visible** avec des lignes sur les 4 onglets non-source (`be.visible` échoue sur un élément de hauteur nulle, la forme exacte de la régression). - Local : `pnpm lint` OK, `pnpm --filter web build` OK, `cypress run --spec cypress/e2e/planning-page.cy.ts` → 11/11 (10 existants + le nouveau). - Suite complète (biome / tsc / build / e2e) : via la CI. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added the

High

bug

planned

labels 2026-09-08 01:18:44 +02:00

kyuno added 1 commit 2026-09-08 01:18:44 +02:00

fix(planning): affiche les recettes du picker sur mobile (#111 )

CI / lint (push) Successful in 1m39s

Details

CI / build (push) Successful in 1m43s

Details

CI / intent-service-test (push) Successful in 3m56s

Details

CI / e2e (push) Successful in 8m37s

Details

CI / test (push) Successful in 16m12s

Details

CI / build-android (push) Has been skipped

Details

642b37ebec

Sur téléphone, le dialogue d'ajout d'une recette au planning devenait
plein écran mais `.recipe-picker-dialog` gardait un `height: 80vh` figé.
Dans cette colonne flex de hauteur bornée, le bloc `.recipe-picker__filters`
(rendu pour les 4 onglets non-source) consommait toute la place et
`.recipes-page__catalog` (`flex: 1`) s'effondrait à ~0 : la table des
recettes était dans le DOM mais dans un scrollport de hauteur nulle, donc
les onglets Favoris / Perso / Foyer / Publique paraissaient vides.

Sous le breakpoint phone : le dialogue passe vraiment plein écran (comme
tout autre `Dialog`), `.recipe-picker__filters` ne se laisse plus
compresser, et le catalogue prend sa hauteur de contenu — c'est
`.dialog-panel__body` qui scrolle.

Closes #111

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

kyuno merged commit b52586e076 into main

2026-09-08 01:35:53 +02:00

kyuno referenced this pull request from a commit

2026-09-08 01:35:55 +02:00

Merge pull request 'fix(planning): affiche les recettes du picker sur mobile (#111)' (#112) from fix/recipe-picker-dialog-mobile-empty into main