[Web] Grille de planning : hauteur fluide, le contenu ne doit plus agrandir les cases #110

New issue

Closed

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

kyuno commented

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

Owner

Résumé

La grille hebdo de planning (bureau/tablette) n'a pas une hauteur qui remplit l'écran : les hauteurs de lignes sont pilotées par le contenu, donc un créneau avec plusieurs recettes fait grandir sa case → toute la ligne → toute la table → scroll vertical du wrapper, et les autres cases de la ligne se retrouvent hautes et à moitié vides.

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

apps/web/src/pages/planning/planning-page.scss :
- .planning-page { height:100%; display:flex; flex-direction:column } — OK.
- .planning-grid-wrapper { flex:1; min-height:0; overflow:auto } — déjà correct, c'est le conteneur scrollable.
- table.planning-grid { width:100%; height:100%; min-width:62rem; border-collapse:collapse; table-layout:fixed } — table-layout:fixed fige les largeurs de colonnes, pas les hauteurs de lignes.
- .meal-cell__content { display:flex; flex-direction:column; height:100% } et .meal-cell__recipes { display:flex; flex-direction:column; gap:var(--space-xs) } — aucun max-height, aucun overflow : N .recipe-chip s'empilent sans limite.
Vue téléphone hors périmètre : un bloc @include bp.phone remplace entièrement la table par PlanningDayView (issue #88). Ce ticket ne concerne que la table ≥ 640 px.
vertical-align: top sur th, td → les cases courtes d'une ligne haute laissent du vide.

Contenu attendu

La grille remplit la hauteur disponible et chaque ligne garde une part égale ; un créneau chargé scrolle/clampe en interne au lieu d'étirer sa ligne.

Piste minimale recommandée : borner .meal-cell__content (ou .meal-cell__recipes) et lui mettre overflow-y:auto — même motif flex:1; min-height:0; overflow:auto que .planning-grid-wrapper et .cooking-phase (cooking-session-page.scss). Table <table> conservée.

Alternative : passer en CSS grid (grid-template-columns: 9rem repeat(7, 1fr); grid-template-rows: auto repeat(5, 1fr)) avec min-height:0; overflow:auto par case — plus proche du « prend le max de l'écran », mais il faut reproduire le banding « moment de la journée » (aujourd'hui border-collapse + bordures sur tbody tr.band-end). Réévaluer aussi si min-width: 62rem doit être assoupli.

Couverture : planning-page.cy.ts (viewport 1600×900, 35 boutons +), layout.cy.ts (assertFillsContentWidth(".planning-page") et le cas 375 px de la vue jour).

Dépendances

Aucune.

## Résumé La grille hebdo de planning (bureau/tablette) n'a pas une hauteur qui remplit l'écran : les hauteurs de lignes sont pilotées par le contenu, donc un créneau avec plusieurs recettes fait grandir sa case → toute la ligne → toute la table → scroll vertical du wrapper, et les autres cases de la ligne se retrouvent hautes et à moitié vides. ## Contexte (trouvé en auditant le code, pas supposé) - `apps/web/src/pages/planning/planning-page.scss` : - `.planning-page { height:100%; display:flex; flex-direction:column }` — OK. - `.planning-grid-wrapper { flex:1; min-height:0; overflow:auto }` — **déjà correct**, c'est le conteneur scrollable. - `table.planning-grid { width:100%; height:100%; min-width:62rem; border-collapse:collapse; table-layout:fixed }` — `table-layout:fixed` fige les **largeurs** de colonnes, pas les **hauteurs** de lignes. - `.meal-cell__content { display:flex; flex-direction:column; height:100% }` et `.meal-cell__recipes { display:flex; flex-direction:column; gap:var(--space-xs) }` — **aucun `max-height`, aucun `overflow`** : N `.recipe-chip` s'empilent sans limite. - Vue téléphone hors périmètre : un bloc `@include bp.phone` remplace entièrement la table par `PlanningDayView` (issue #88). Ce ticket ne concerne que la table ≥ 640 px. - `vertical-align: top` sur `th, td` → les cases courtes d'une ligne haute laissent du vide. ## Contenu attendu La grille remplit la hauteur disponible et chaque ligne garde une part égale ; un créneau chargé **scrolle/clampe en interne** au lieu d'étirer sa ligne. Piste minimale recommandée : borner `.meal-cell__content` (ou `.meal-cell__recipes`) et lui mettre `overflow-y:auto` — même motif `flex:1; min-height:0; overflow:auto` que `.planning-grid-wrapper` et `.cooking-phase` (`cooking-session-page.scss`). Table `<table>` conservée. Alternative : passer en CSS grid (`grid-template-columns: 9rem repeat(7, 1fr); grid-template-rows: auto repeat(5, 1fr)`) avec `min-height:0; overflow:auto` par case — plus proche du « prend le max de l'écran », mais il faut reproduire le banding « moment de la journée » (aujourd'hui `border-collapse` + bordures sur `tbody tr.band-end`). Réévaluer aussi si `min-width: 62rem` doit être assoupli. Couverture : `planning-page.cy.ts` (viewport 1600×900, 35 boutons `+`), `layout.cy.ts` (`assertFillsContentWidth(".planning-page")` et le cas 375 px de la vue jour). ## Dépendances Aucune.