neckfireandClaude Opus 5
35d2588dfc
Build & Deploy / build (push) Successful in 23s
Cause réelle : .main est un élément flex sans min-width:0. Sa valeur par défaut min-width:auto l'autorise à dépasser la largeur de son conteneur dès qu'il contient un bloc large — ici le tableau des documents, dont les titres sont longs. La page entière partait donc plus large que l'écran, entraînant l'entête et les onglets avec elle. Aucun point de rupture ne pouvait rattraper ça, le problème étant en amont du responsive. - .main : min-width:0 (corrige aussi les autres pages à tableau). - .page : width:100% + min-width:0, pour ne jamais dépasser la place offerte. - Onglets : bande défilante à toutes les largeurs, plus seulement sous le breakpoint — avec la sidebar de 16rem, quatre onglets débordent bien avant. - Cellules : coupure des mots à toutes les largeurs, et borne de largeur sur la colonne titre, qu'un seul libellé long suffisait à étirer. - Bascule en cartes remontée de 768 à 900px : la sidebar retire 16rem à la largeur utile, les tableaux étaient à l'étroit bien avant le seuil. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
32 lines
644 B
CSS
32 lines
644 B
CSS
.app {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
background-color: #f8fafc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.contentWrapper {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
/* Sans min-width:0 un élément flex garde min-width:auto et déborde de son
|
|
conteneur dès qu'il contient un bloc large (tableau, titre non coupable) :
|
|
la page entière part alors plus large que l'écran. */
|
|
min-width: 0;
|
|
margin-left: 16rem;
|
|
padding: 2rem;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.contentWrapper{flex-direction:column}
|
|
.main {
|
|
margin-left: 0;
|
|
}
|
|
}
|