From 1f329b8595ab85b0c1a67796c210e8583f93867b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 6 Oct 2026 10:14:55 +0000
Subject: [PATCH] =?UTF-8?q?Tableaux=20:=20largeur=20du=20contenu=20au=20li?=
 =?UTF-8?q?eu=20de=20s'=C3=A9tirer=20sur=20les=20=C3=A9crans=20tr=C3=A8s?=
 =?UTF-8?q?=20larges?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sur un écran très large, la colonne de libellé absorbait tout l'espace en
trop : le nom du fournisseur se retrouvait à un millier de pixels de ses
chiffres. Le tableau prend désormais la largeur de son contenu (défilement
au-delà de l'écran) et l'option « grow » devient « label » : largeur
naturelle, retour à la ligne au-delà de 28rem.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FaniLFvegAZNXFrFFSStqa
---
 src/app/(dashboard)/analytics/client.tsx  |  2 +-
 src/app/(dashboard)/hit-parade/client.tsx |  2 +-
 src/app/(dashboard)/publicites/client.tsx |  4 ++--
 src/components/ui/data-table.tsx          | 28 ++++++++++++++---------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/app/(dashboard)/analytics/client.tsx b/src/app/(dashboard)/analytics/client.tsx
index cda71c2..81e30fb 100644
--- a/src/app/(dashboard)/analytics/client.tsx
+++ b/src/app/(dashboard)/analytics/client.tsx
@@ -118,7 +118,7 @@ export function AnalyticsClient({
             footer: () => "Total",
             className: "min-w-[140px] sm:min-w-[220px]",
             sticky: true,
-            grow: true,
+            label: true,
         },
         ...GROUPES.flatMap((g): DataColumn<AnalyticsRow>[] => {
             const total = g.id === "total";
diff --git a/src/app/(dashboard)/hit-parade/client.tsx b/src/app/(dashboard)/hit-parade/client.tsx
index c72a5a3..221c951 100644
--- a/src/app/(dashboard)/hit-parade/client.tsx
+++ b/src/app/(dashboard)/hit-parade/client.tsx
@@ -132,7 +132,7 @@ const COLONNES: DataColumn<Ligne>[] = [
         footer: rows => <span className="whitespace-nowrap">{fmtEntier(rows.length)} articles</span>,
         className: "min-w-[140px] sm:min-w-[220px]",
         sticky: true,
-        grow: true,
+        label: true,
     },
     {
         id: "reference",
diff --git a/src/app/(dashboard)/publicites/client.tsx b/src/app/(dashboard)/publicites/client.tsx
index a73832f..56337ea 100644
--- a/src/app/(dashboard)/publicites/client.tsx
+++ b/src/app/(dashboard)/publicites/client.tsx
@@ -172,7 +172,7 @@ export function PublicitesClient({
                 sortValue: (p) => p.intitule,
                 cell: (p) => <Operation intitule={p.intitule} code={p.tcr_code} />,
                 sticky: true,
-                grow: true,
+                label: true,
                 footer: (rows) =>
                     `Total${paginee ? " de la page" : ""} · ${fmtEntier(rows.length)} publicité${rows.length > 1 ? "s" : ""}`,
             },
@@ -264,7 +264,7 @@ export function PublicitesClient({
                 sortValue: (h) => h.intitule,
                 cell: (h) => <Operation intitule={h.intitule} code={h.tcr_code} />,
                 sticky: true,
-                grow: true,
+                label: true,
                 footer: (rows) => `Total · ${fmtEntier(rows.length)} opération${rows.length > 1 ? "s" : ""}`,
             },
             {
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
index abf3268..b12a722 100644
--- a/src/components/ui/data-table.tsx
+++ b/src/components/ui/data-table.tsx
@@ -34,11 +34,12 @@ export interface DataColumn<T> {
     className?: string;
     headerClassName?: string;
     /**
-     * La colonne prend toute la largeur restante (désignation, libellé…) : les
-     * colonnes de chiffres gardent leur largeur naturelle au lieu de s'étirer
-     * sur un écran large, loin de leur libellé.
+     * Colonne de libellé (désignation, fournisseur…) : largeur naturelle, avec
+     * retour à la ligne au-delà de 28rem. Le tableau ne s'étire jamais au-delà
+     * de son contenu : sur un écran très large, le libellé reste collé à ses
+     * chiffres au lieu d'en être séparé par un grand vide.
      */
-    grow?: boolean;
+    label?: boolean;
     /**
      * Colonne figée à gauche pendant le défilement horizontal. Seules les
      * premières colonnes consécutives peuvent l'être.
@@ -257,11 +258,15 @@ export function DataTable<T>({
         i === nbFigees - 1 && "dt-sticky-last",
         c.highlight && "dt-highlight",
         debutGroupe(i) && "border-l border-[var(--border-strong)]",
-        c.grow && "w-full",
-        // Désignation figée : bornée sur mobile pour laisser voir les chiffres.
-        c.grow && i < nbFigees && "max-w-[45vw] md:max-w-none",
     );
 
+    /** Contenu d'une cellule de libellé, borné en largeur (cf. `label`). */
+    const borne = (c: DataColumn<T>, i: number, contenu: ReactNode) =>
+        c.label ? (
+            // Libellé figé : plus étroit sur mobile pour laisser voir les chiffres.
+            <div className={i < nbFigees ? "max-w-[45vw] md:max-w-[28rem]" : "max-w-[28rem]"}>{contenu}</div>
+        ) : contenu;
+
     const enTete = (c: DataColumn<T>, i: number, rowSpan?: number) => {
         const triable = Boolean(c.sortValue);
         const actif = tri?.id === c.id;
@@ -388,10 +393,11 @@ export function DataTable<T>({
                 />
             ) : (
                 <div
-                    className="overflow-auto rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--shadow-sm)]"
+                    // Largeur du contenu, sans dépasser l'écran (au-delà : défilement).
+                    className="w-fit max-w-full overflow-auto rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--shadow-sm)]"
                     style={{ maxHeight }}
                 >
-                    <table ref={tableRef} className="dt-table min-w-full text-sm">
+                    <table ref={tableRef} className="dt-table text-sm">
                         <thead className="sticky top-0 z-10">
                             {avecGroupes ? (
                                 <>
@@ -426,7 +432,7 @@ export function DataTable<T>({
                                                 c.className,
                                             )}
                                         >
-                                            {c.cell(r)}
+                                            {borne(c, ci, c.cell(r))}
                                         </td>
                                     ))}
                                 </tr>
@@ -446,7 +452,7 @@ export function DataTable<T>({
                                                 classesColonne(c, ci),
                                             )}
                                         >
-                                            {c.footer ? c.footer(triees) : null}
+                                            {c.footer ? borne(c, ci, c.footer(triees)) : null}
                                         </td>
                                     ))}
                                 </tr>