From 9e8830e92977aa5bbc4969e0182e0e408662ac2b Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Wed, 10 Jun 2026 09:08:19 +0000
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Remplacement=20des=20min-w=20Tail?=
 =?UTF-8?q?wind=20par=20des=20width/minWidth/maxWidth=20explicites=20en=20?=
 =?UTF-8?q?style=20inline=20(Code=3D110px,=20=C3=89tablissement=3D220px,?=
 =?UTF-8?q?=20left=3D110px)=20pour=20garantir=20la=20coh=C3=A9rence=20entr?=
 =?UTF-8?q?e=20la=20largeur=20r=C3=A9elle=20et=20la=20position=20left=20de?=
 =?UTF-8?q?s=20colonnes=20sticky.=20Ajout=20d'un=20title=20sur=20la=20cell?=
 =?UTF-8?q?ule=20=C3=89tablissement=20pour=20voir=20le=20nom=20complet=20e?=
 =?UTF-8?q?n=20cas=20de=20troncature.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/DsiOpex.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/DsiOpex.tsx b/client/src/pages/DsiOpex.tsx
index 9df37aa..05d497c 100644
--- a/client/src/pages/DsiOpex.tsx
+++ b/client/src/pages/DsiOpex.tsx
@@ -1252,8 +1252,8 @@ export default function DsiOpex() {
                   <table className="text-xs border-separate border-spacing-0" style={{ minWidth: 'max-content', width: '100%' }}>
                     <thead>
                       <tr className="border-b border-border bg-muted/40">
-                        <th className="text-left px-3 py-3 font-medium text-muted-foreground sticky left-0 z-20 min-w-[80px]" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 0 0 hsl(var(--border))' }}>Code</th>
-                        <th className="text-left px-3 py-3 font-medium text-muted-foreground sticky left-[80px] z-20 min-w-[200px]" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 4px -2px rgba(0,0,0,0.15)' }}>
+                        <th className="text-left px-3 py-3 font-medium text-muted-foreground sticky left-0 z-20" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 0 0 hsl(var(--border))', width: '110px', minWidth: '110px', maxWidth: '110px' }}>Code</th>
+                        <th className="text-left px-3 py-3 font-medium text-muted-foreground sticky z-20" style={{ left: '110px', background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 6px -2px rgba(0,0,0,0.2)', width: '220px', minWidth: '220px', maxWidth: '220px' }}>
                           <SortBtn col="nom" label="Établissement" />
                         </th>
                         {/* Colonnes postes — vert = prorata auto, bleu = manuel */}
@@ -1285,10 +1285,10 @@ export default function DsiOpex() {
                     <tbody>
                       {sortedEtabs.map((etab, idx) => (
                         <tr key={etab.code} className={`border-b border-border/50 hover:bg-muted/20 transition-colors ${idx % 2 === 0 ? '' : 'bg-muted/5'}`}>
-                          <td className="px-3 py-2 sticky left-0 z-10 whitespace-nowrap" style={{ background: idx % 2 === 0 ? 'hsl(var(--card))' : 'hsl(var(--muted) / 0.05)', boxShadow: '2px 0 0 0 hsl(var(--border))' }}>
+                          <td className="px-3 py-2 sticky left-0 z-10 whitespace-nowrap" style={{ background: idx % 2 === 0 ? 'hsl(var(--card))' : 'hsl(var(--muted) / 0.05)', boxShadow: '2px 0 0 0 hsl(var(--border))', width: '110px', minWidth: '110px', maxWidth: '110px' }}>
                             <span className="font-mono bg-muted px-1.5 py-0.5 rounded text-muted-foreground">{etab.code}</span>
                           </td>
-                          <td className="px-3 py-2 font-medium text-foreground sticky left-[80px] z-10 whitespace-nowrap" style={{ background: idx % 2 === 0 ? 'hsl(var(--card))' : 'hsl(var(--muted) / 0.05)', boxShadow: '2px 0 4px -2px rgba(0,0,0,0.15)' }}>{etab.nom}</td>
+                          <td className="px-3 py-2 font-medium text-foreground sticky z-10 whitespace-nowrap overflow-hidden text-ellipsis" style={{ left: '110px', background: idx % 2 === 0 ? 'hsl(var(--card))' : 'hsl(var(--muted) / 0.05)', boxShadow: '2px 0 6px -2px rgba(0,0,0,0.2)', width: '220px', minWidth: '220px', maxWidth: '220px' }} title={etab.nom}>{etab.nom}</td>
                           {opexState.lignes.map(ligne => {
                             const srcPoste = getOpexDataForAnnee(annee).postes.find(p => p.libelle === ligne.libelle);
                             const isManuel = srcPoste?.mode_ventilation === 'Manuel' || ligne.isCustom;
@@ -1351,7 +1351,7 @@ export default function DsiOpex() {
                     </tbody>
                     <tfoot>
                       <tr className="bg-muted/40 border-t-2 border-border">
-                        <td colSpan={2} className="px-3 py-3 font-bold text-foreground sticky left-0 z-10" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 4px -2px rgba(0,0,0,0.15)' }}>
+                        <td colSpan={2} className="px-3 py-3 font-bold text-foreground sticky left-0 z-10" style={{ background: 'hsl(var(--muted) / 0.4)', boxShadow: '2px 0 6px -2px rgba(0,0,0,0.2)', width: '330px', minWidth: '330px' }}>
                           TOTAL — {sortedEtabs.length} établissements
                         </td>
                         {opexState.lignes.map(ligne => {