From 35d2588dfc902a2bfeb46b1df9a53ed027fd8065 Mon Sep 17 00:00:00 2001
From: neckfire <nfteamhead@proton.me>
Date: Sat, 15 Aug 2026 16:50:59 +0200
Subject: [PATCH] =?UTF-8?q?Corrige=20le=20d=C3=A9bordement=20de=20la=20pag?=
 =?UTF-8?q?e=20admin=20(texte=20et=20onglets=20hors=20cadre)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/App.module.css          |  4 ++++
 src/styles/Admin.module.css | 35 ++++++++++++++++++++++++++---------
 2 files changed, 30 insertions(+), 9 deletions(-)

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