fix(planning): la grille remplit l'écran, une case ne grandit plus (#110) #113
Loading…
Reference in a new issue
No description provided.
Delete branch "fix/planning-grid-fluid-height"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Contexte
Closes #110.table.planning-grid(planning-page.scss) aheight: 100%mais des hauteurs de ligne pilotées par le contenu : un créneau avec plusieurs recettes étirait son<td>, donc toute la ligne (les autres cases de la ligne gagnant la même hauteur morte sousvertical-align: top), puis la table débordait de.planning-grid-wrapperen scroll vertical..planning-grid-wrapper(flex: 1; min-height: 0; overflow: auto) était déjà correct — le problème était le contenu des cases.Changements (
apps/web/src/pages/planning/planning-page.scss)tbody tr { height: 1px }— les 5 lignes se partagent la hauteur du wrapper à parts égales (une hauteur de ligne de tableau est un minimum que le navigateur étire pour absorber la hauteur restante de la table), au lieu d'être aussi hautes que la colonne la plus chargée..meal-cell__recipes { max-height: 8.5rem; overflow-y: auto }— au-delà d'une poignée de recettes la liste scrolle dans la case. Cap enremet pas en%de la cellule : les hauteurs en pourcentage sur un<td>ne se résolvent pas de façon fiable selon le moteur de rendu.flex: 1; min-height: 0laisse la liste utiliser la hauteur libre de la ligne jusqu'à ce cap..add-recipe-btnest un frère flex (hors de cette boîte) et reste épinglé juste en dessous.min-width: 62remlaissé tel quel : les 7 colonnes ont besoin d'un plancher pour rester lisibles, et le scroll horizontal en dessous est déjà couvert parlayout.cy.ts. Le breakpoint phone (vuePlanningDayViewdédiée, issue #88) n'est pas concerné.Tests
apps/web/cypress/e2e/planning-page.cy.ts: nouveau cas dansdescribe("Planning grid")— planning avec un créneau à 14 recettes, à 1600×900 : la.meal-cell__recipesde ce créneau aoverflow-y: auto, scrolle réellement (scrollHeight > clientHeight), reste bornée (clientHeight < 200), et.planning-grid-wrapperne s'emballe pas (scrollHeight < clientHeight * 1.25).pnpm lintOK,pnpm --filter web buildOK,cypress run --spec cypress/e2e/planning-page.cy.ts→ 12/12.🤖 Generated with Claude Code
`table.planning-grid` a `height: 100%` mais des hauteurs de ligne pilotées par le contenu : un créneau avec plusieurs recettes étirait son `<td>`, donc toute la ligne (les autres cases gagnant la même hauteur morte sous `vertical-align: top`), puis la table débordait de `.planning-grid-wrapper` en scroll vertical. - `tbody tr { height: 1px }` : les cinq lignes se partagent la hauteur du wrapper à parts égales (une hauteur de ligne est un minimum que le navigateur étire pour absorber la hauteur restante de la table), au lieu d'être aussi hautes que la colonne la plus chargée. - `.meal-cell__recipes` : `max-height: 8.5rem; overflow-y: auto` — au-delà d'une poignée de recettes la liste scrolle dans la case. Cap en `rem` et pas en `%` : les hauteurs en pourcentage sur un `<td>` ne se résolvent pas de façon fiable selon le moteur. `.add-recipe-btn` (frère flex hors de cette boîte) reste épinglé juste en dessous. - `min-width: 62rem` laissé tel quel : les 7 colonnes ont besoin d'un plancher pour rester lisibles, et le scroll horizontal dessous est couvert par `layout.cy.ts`. Le breakpoint phone (vue `PlanningDayView`) n'est pas concerné. Closes #110 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>