[Mobile] Dialogue d'ajout de recette au planning : aucune recette affichée #111

New issue

Closed

opened 2026-09-08 00:49:45 +02:00 by kyuno · 0 comments

kyuno commented

2026-09-08 00:49:45 +02:00

Owner

Résumé

Sur téléphone, le dialogue d'ajout d'une recette à un créneau du planning n'affiche aucune recette dans les onglets Favoris / Perso / Foyer / Publique — la liste est là dans le DOM mais rendue dans une zone de hauteur nulle. Casse un parcours cœur sur mobile.

Contexte (trouvé en auditant le code, pas supposé)

apps/web/src/features/planning/RecipePickerDialog.tsx est inchangé ; la régression vient du CSS modifié par le chantier UI mobile.
apps/web/src/components/ui/dialog.scss : @include bp.phone { .dialog-panel { height:100vh; max-height:100vh } } (dialogs plein écran sur téléphone).
apps/web/src/features/planning/recipe-picker-dialog.scss : .recipe-picker-dialog { height:80vh; max-height:80vh } (fige à 80vh, y compris téléphone), et override .dialog-panel__body { display:flex; flex-direction:column }.
Dans ce body flex-column, pour les 4 onglets « réels » : .recipe-picker__filters (display:flex; flex-direction:column; gap:var(--space-md); margin-bottom:var(--space-md)) — sans flex-shrink:0 ni plafond de hauteur ; contient recherche + chips ingrédients + IngredientPicker + DietTagSelect + case foyer. Puis RecipeTabs, puis .recipes-page__catalog (flex:1; min-height:0; display:grid, de recipes.scss).
Sur un écran ~375×650, le panneau 80vh moins header/footer/padding laisse ~350–400 px au body ; les filtres consomment tout, .recipes-page__catalog (flex-basis:0, min-height:0) s'effondre à ~0, et .recipe-table-wrap { height:100%; overflow-y:auto } devient un scrollport de hauteur nulle → <table> présente mais invisible.
Cohérent avec le bug : les onglets « source » ne rendent pas .recipe-picker__filters ({ activeSourceKey === null && … }) donc ne sont pas touchés.

Contenu attendu

Sur téléphone, la zone de navigation du dialogue doit rester utilisable : donner flex-shrink:0 à .recipe-picker__filters, et soit laisser tout .dialog-panel__body scroller (retirer le flex:1; min-height:0 sur .recipes-page__catalog dans le dialogue à largeur téléphone → hauteur au contenu), soit plafonner les filtres (max-height + overflow-y:auto) pour que le catalogue garde une part réelle.

Réutiliser la discipline de la page /recettes (recipes.scss : .recipes-page { height:100%; display:flex; flex-direction:column }, header flex-shrink:0, catalogue seul enfant qui grandit). Envisager de laisser le picker aller réellement plein écran sur téléphone (aligné sur dialog.scss) plutôt que le pin 80vh.

Couverture : spec Cypress à 375 px — ouvrir le dialogue, parcourir les 4 onglets réels, asserter .recipe-table visible avec des lignes.

Dépendances

Régression du chantier « UI mobile & tablette » (dialogs plein écran).

## Résumé Sur téléphone, le dialogue d'ajout d'une recette à un créneau du planning n'affiche **aucune recette** dans les onglets Favoris / Perso / Foyer / Publique — la liste est là dans le DOM mais rendue dans une zone de hauteur nulle. Casse un parcours cœur sur mobile. ## Contexte (trouvé en auditant le code, pas supposé) - `apps/web/src/features/planning/RecipePickerDialog.tsx` est **inchangé** ; la régression vient du CSS modifié par le chantier UI mobile. - `apps/web/src/components/ui/dialog.scss` : `@include bp.phone { .dialog-panel { height:100vh; max-height:100vh } }` (dialogs plein écran sur téléphone). - `apps/web/src/features/planning/recipe-picker-dialog.scss` : `.recipe-picker-dialog { height:80vh; max-height:80vh }` (fige à 80vh, y compris téléphone), et override `.dialog-panel__body { display:flex; flex-direction:column }`. - Dans ce body flex-column, pour les 4 onglets « réels » : `.recipe-picker__filters` (`display:flex; flex-direction:column; gap:var(--space-md); margin-bottom:var(--space-md)`) — **sans `flex-shrink:0` ni plafond de hauteur** ; contient recherche + chips ingrédients + `IngredientPicker` + `DietTagSelect` + case foyer. Puis `RecipeTabs`, puis `.recipes-page__catalog` (`flex:1; min-height:0; display:grid`, de `recipes.scss`). - Sur un écran ~375×650, le panneau 80vh moins header/footer/padding laisse ~350–400 px au body ; les filtres consomment tout, `.recipes-page__catalog` (`flex-basis:0`, `min-height:0`) s'effondre à ~0, et `.recipe-table-wrap { height:100%; overflow-y:auto }` devient un scrollport de hauteur nulle → `<table>` présente mais invisible. - Cohérent avec le bug : les onglets « source » ne rendent pas `.recipe-picker__filters` (`{ activeSourceKey === null && … }`) donc ne sont pas touchés. ## Contenu attendu Sur téléphone, la zone de navigation du dialogue doit rester utilisable : donner `flex-shrink:0` à `.recipe-picker__filters`, et soit laisser tout `.dialog-panel__body` scroller (retirer le `flex:1; min-height:0` sur `.recipes-page__catalog` dans le dialogue à largeur téléphone → hauteur au contenu), soit plafonner les filtres (`max-height` + `overflow-y:auto`) pour que le catalogue garde une part réelle. Réutiliser la discipline de la page `/recettes` (`recipes.scss` : `.recipes-page { height:100%; display:flex; flex-direction:column }`, header `flex-shrink:0`, catalogue seul enfant qui grandit). Envisager de laisser le picker aller réellement plein écran sur téléphone (aligné sur `dialog.scss`) plutôt que le pin 80vh. Couverture : spec Cypress à 375 px — ouvrir le dialogue, parcourir les 4 onglets réels, asserter `.recipe-table` visible avec des lignes. ## Dépendances Régression du chantier « UI mobile & tablette » (dialogs plein écran).