From 0de53893748b7e56853f276c3bae75ec71091ea5 Mon Sep 17 00:00:00 2001 From: Nicolas Date: Wed, 19 Aug 2026 10:23:38 +0200 Subject: [PATCH] =?UTF-8?q?fix(web):=20la=20grille=20recettes=20stretche?= =?UTF-8?q?=20le=20panneau=20de=20d=C3=A9tail=20sur=20toute=20sa=20hauteur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Régression révélée par le fix du layout précédent (AppLayout.scss) : tant que `.app-layout` grandissait sans limite (`min-height: 100vh`), rien dans la chaîne de hauteurs (.app-content → .recipes-page → .recipes-page__catalog → .recipe-detail-panel) n'avait de hauteur réellement définie, donc `.recipe-detail-panel { height: 100% }` ne contraignait jamais rien — le panneau grandissait pour tout afficher, masquant silencieusement que sa grille parente (`&__catalog`, display: grid) n'a jamais eu de `grid-template-rows` explicite. Avec `.app-layout` maintenant fixé à `height: 100vh`, `&__catalog` a enfin une hauteur définie — mais sans `grid-template-rows`, sa seule ligne implicite reste dimensionnée à son contenu (auto) au lieu de s'étirer sur toute la hauteur disponible, comme l'intention documentée en commentaire (« both stretched to the same full height ») le disait déjà. Résultat concret : le panneau de détail recette rendait plus court que son propre contenu, qui se retrouvait coupé par son `overflow-y: auto` — repéré via l'échec CI de recipes.cy.ts sur "opens a recipe's detail alongside the table" (timeout sur la description, `

` non visible car clippée par un parent en overflow). Vérifié en réinjectant les mêmes fixtures dans le navigateur (mock fetch temporaire) : le panneau passe de 296px à 448px de haut, la description reste entièrement dans ses limites. --- apps/web/src/features/recipes/recipes.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/apps/web/src/features/recipes/recipes.scss b/apps/web/src/features/recipes/recipes.scss index 9b70281..559771f 100644 --- a/apps/web/src/features/recipes/recipes.scss +++ b/apps/web/src/features/recipes/recipes.scss @@ -124,6 +124,17 @@ min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(35vw, 38vw); + // Without this, the grid's single implicit row falls back to + // auto-sizing (tall enough for its content), not the full height of + // `&__catalog` itself — silently masked as long as `.app-content`'s own + // height was `min-height: 100vh` (auto-grew to fit anything, so + // nothing downstream ever actually needed to stretch to a fixed + // height). Fixing that (see AppLayout.scss) made `&__catalog`'s height + // genuinely definite for the first time, which surfaced this: the + // detail panel's own `height: 100%; overflow-y: auto` (see + // `.recipe-detail-panel` below) had nothing to stretch against, came + // out shorter than its content, and silently clipped it. + grid-template-rows: minmax(0, 1fr); gap: var(--space-lg); }