From a81a5a4beebc56466f5985c2f9e39cb3e86245dc Mon Sep 17 00:00:00 2001
From: neckfire <nfteamhead@proton.me>
Date: Sat, 15 Aug 2026 17:06:15 +0200
Subject: [PATCH] =?UTF-8?q?Page=20admin=20:=20supprime=20le=20d=C3=A9borde?=
 =?UTF-8?q?ment=20=C3=A0=20toutes=20les=20largeurs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mesuré au navigateur avant/après (scrollWidth vs clientWidth, 320/375/414/768/
900/1024/1280px) : la page débordait partout, de 17px en mode carte et de 32px
au-dessus de 1024. Deux causes, aucune liée aux points de rupture.

1. L'application tourne en content-box. src/styles/global.css porte bien un
   `* { box-sizing: border-box }` mais n'est importé nulle part — main.tsx ne
   charge que index.css, qui pose border-box sur le seul #root. Tout width:100%
   assorti d'un padding débordait donc de son conteneur. Réinitialisation
   cantonnée à .page : global.css est un vestige d'une ancienne maquette (son
   propre .sidebar, .layout, un autre fond de body), l'importer déplacerait tout
   le site.

2. En mode carte, .table td était en display:flex : le texte de la cellule
   devenait un élément flex anonyme, avec min-width:auto, et un titre de
   document long refusait de se réduire — il sortait de la carte et entraînait
   la page entière, onglets compris. Passé en bloc, intitulé au-dessus de la
   valeur, avec coupure des mots.

Aussi : min-width:0 sur .tabs, sans quoi son overflow-x:auto ne s'enclenchait
jamais ; et rétablissement de la rangée d'actions, dont le display:flex était
écrasé en spécificité par `.table td { display: block }`.

Après correction : aucun débordement sur les quatre onglets, de 320 à 1280px.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/styles/Admin.module.css | 45 ++++++++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/styles/Admin.module.css b/src/styles/Admin.module.css
index 3efdcbb..066ebda 100644
--- a/src/styles/Admin.module.css
+++ b/src/styles/Admin.module.css
@@ -2,6 +2,18 @@
    accent violet #7c3aed (celui de la Sidebar), échelle de gris Tailwind,
    cartes blanches bordées, rayons 0.5/0.75rem, unités rem. */
 
+/* main.tsx ne charge pas styles/global.css — vestige d'une ancienne maquette,
+   jamais importé — donc son `* { box-sizing: border-box }` ne s'applique pas et
+   l'application tourne en content-box : tout width:100% assorti d'un padding
+   déborde de son conteneur. Réinitialisation cantonnée à cette page pour ne rien
+   déplacer sur le reste du site. */
+.page,
+.page *,
+.page *::before,
+.page *::after {
+  box-sizing: border-box;
+}
+
 .page {
   padding: 2rem;
   width: 100%;
@@ -33,6 +45,7 @@
 .tabs {
   display: flex;
   gap: 0.5rem;
+  min-width: 0;
   max-width: 100%;
   overflow-x: auto;
   scrollbar-width: none;
@@ -507,6 +520,7 @@
     background: transparent;
     border: none;
     border-radius: 0;
+    max-width: 100%;
     overflow-x: visible;
   }
 
@@ -539,24 +553,34 @@
     background: white;
   }
 
+  /* Surtout pas display:flex ici : le texte de la cellule deviendrait un élément
+     flex anonyme, avec min-width:auto — un titre long refuserait de se réduire et
+     sortirait de la carte, en entraînant toute la page. En bloc, l'intitulé passe
+     au-dessus de la valeur et la coupure de mots suffit. */
   .table td {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
+    display: block;
     padding: 0.5rem 1rem;
     border-bottom: none;
-    text-align: right;
+    text-align: left;
     overflow-wrap: anywhere;
+    word-break: break-word;
   }
 
-  .table td::before {
+  .table td[data-label]::before {
     content: attr(data-label);
+    display: block;
+    font-size: 0.6875rem;
     font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
     color: rgb(107, 114, 128);
-    font-size: 0.8125rem;
-    text-align: left;
-    flex-shrink: 0;
+    margin-bottom: 0.125rem;
+  }
+
+  /* `.table td { display: block }` l'emporte en spécificité sur `.rowActions` :
+     on le rétablit ici pour garder les actions sur une rangée. */
+  .table td.rowActions {
+    display: flex;
   }
 
   .rowActions {
@@ -567,7 +591,8 @@
   }
 
   .rowActions button {
-    flex: 1;
+    flex: 1 1 8rem;
+    min-width: 0;
     padding: 0.5rem 0.75rem;
   }