fix(web): restaure le layout table+panneau empilé sous 1024px
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.
This commit is contained in:
parent
0de5389374
commit
2fccfa2ecf
1 changed files with 9 additions and 0 deletions
|
|
@ -141,6 +141,15 @@
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
&__catalog {
|
&__catalog {
|
||||||
grid-template-columns: 1fr;
|
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;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue