diff --git a/src/App.module.css b/src/App.module.css index 7a51851..cc9891a 100644 --- a/src/App.module.css +++ b/src/App.module.css @@ -14,6 +14,10 @@ .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; diff --git a/src/styles/Admin.module.css b/src/styles/Admin.module.css index 29fc969..3efdcbb 100644 --- a/src/styles/Admin.module.css +++ b/src/styles/Admin.module.css @@ -4,7 +4,9 @@ .page { padding: 2rem; + width: 100%; max-width: 80rem; + min-width: 0; margin: 0 auto; } @@ -16,6 +18,7 @@ justify-content: space-between; gap: 1rem; flex-wrap: wrap; + min-width: 0; margin-bottom: 1.75rem; } @@ -30,6 +33,14 @@ .tabs { display: flex; gap: 0.5rem; + max-width: 100%; + overflow-x: auto; + scrollbar-width: none; + padding-bottom: 0.125rem; +} + +.tabs::-webkit-scrollbar { + display: none; } .tabs button { @@ -42,6 +53,7 @@ font-weight: 500; cursor: pointer; white-space: nowrap; + flex-shrink: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } @@ -123,6 +135,7 @@ background: white; border: 1px solid rgb(229, 231, 235); border-radius: 0.75rem; + max-width: 100%; overflow-x: auto; } @@ -137,6 +150,13 @@ padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid rgb(243, 244, 246); + overflow-wrap: anywhere; +} + +/* Sans cette borne, un seul titre long étire la colonne et donc tout le tableau. */ +.table td:nth-child(2) { + min-width: 12rem; + max-width: 26rem; } .table th { @@ -463,7 +483,7 @@ } } -@media (max-width: 768px) { +@media (max-width: 900px) { .page { padding: 1.25rem 1rem; } @@ -478,16 +498,8 @@ font-size: 1.75rem; } - /* Onglets en bande défilante plutôt qu'en retour à la ligne. */ .tabs { width: 100%; - overflow-x: auto; - padding-bottom: 0.25rem; - scrollbar-width: none; - } - - .tabs::-webkit-scrollbar { - display: none; } /* Chaque ligne devient une carte, avec l'intitulé de colonne en regard. */ @@ -506,6 +518,11 @@ width: 100%; } + .table td:nth-child(2) { + min-width: 0; + max-width: none; + } + .table thead { display: none; }