From 2fccfa2ecf0c4431e7f72038e1164a889b69e34b Mon Sep 17 00:00:00 2001 From: Nicolas Date: Wed, 19 Aug 2026 10:31:43 +0200 Subject: [PATCH] =?UTF-8?q?fix(web):=20restaure=20le=20layout=20table+pann?= =?UTF-8?q?eau=20empil=C3=A9=20sous=201024px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Le commit précédent (grid-template-rows sur .recipes-page__catalog) corrigeait bien le layout desktop (2 colonnes, 1 ligne étirée sur toute la hauteur), mais la même règle s'appliquait aussi telle quelle au breakpoint mobile/tablette (@media max-width: 1024px), où la grille passe à 1 seule colonne — donc à 2 lignes empilées (table puis panneau), pas 1. Forcer ces 2 lignes dans un seul track `minmax(0, 1fr)` coupait la hauteur disponible en deux et donnait 0px à la ligne du tableau, dont le contenu se retrouvait entièrement clippé par son propre `overflow-y: auto` — repéré via le nouvel échec CI de recipes.cy.ts (Ratatouille non visible), le viewport par défaut de Cypress (1000×660) tombant sous ce seuil de 1024px. Réinitialise `grid-template-rows: auto` dans ce même bloc `@media`, à côté du `height: auto` qui y était déjà (même logique : plus de ligne unique à hauteur fixe à ce breakpoint). Revérifié dans le navigateur aux deux largeurs (1000px et 1600px) avec les mêmes fixtures que le test. --- apps/web/src/features/recipes/recipes.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/web/src/features/recipes/recipes.scss b/apps/web/src/features/recipes/recipes.scss index 559771f..f772c39 100644 --- a/apps/web/src/features/recipes/recipes.scss +++ b/apps/web/src/features/recipes/recipes.scss @@ -141,6 +141,15 @@ @media (max-width: 1024px) { &__catalog { grid-template-columns: 1fr; + // The single-row `1fr` track above only makes sense for the desktop + // side-by-side layout — collapsed to one column, the table and the + // detail panel stack into two separate rows instead, so forcing them + // both into one `1fr` track split the available height in half and + // gave the table row 0px (its own content pushed below the fold, + // clipped by its `overflow-y: auto`). Reset to the default `auto` + // (each row sized to its content) — matches `height: auto` below, + // which already stopped assuming a single fixed-height row here. + grid-template-rows: auto; height: auto; } }