fix(web): la grille recettes stretche le panneau de détail sur toute sa hauteur

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, `<p>` 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.
This commit is contained in:
Nicolas 2026-08-19 10:23:38 +02:00
parent 1c362c2d1f
commit 0de5389374

View file

@ -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);
}