From b6320806c1fbc3992c778b2b9d7be191b0e8f8d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Thu, 24 Jul 2025 08:17:33 +0400
Subject: [PATCH] =?UTF-8?q?fix:=20am=C3=A9lior=C3=A9=20layout=20table=20ve?=
 =?UTF-8?q?rsions=20avec=20boutons=20actions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Augmenté largeur colonne Actions: 100px → 200px
- Optimisé largeurs: Version 200px→180px, Date 120px→140px
- Ajouté flexWrap et gap réduit (0.3) pour boutons
- Hauteur minimum cellules actions: 64px
- Style compact pour bouton Comparer (minWidth auto)
---
 components/versions/list-versions.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/versions/list-versions.js b/components/versions/list-versions.js
index d7c53f1..5b6c3cd 100644
--- a/components/versions/list-versions.js
+++ b/components/versions/list-versions.js
@@ -29,18 +29,18 @@ import {filterVersions, getFilterStats} from '@/lib/version-utils.js'
 
 const columns = [
   {
-    width: 200,
+    width: 180,
     label: 'Version',
     dataKey: 'name',
   },
   {
-    width: 120,
+    width: 140,
     label: 'Créée le',
     dataKey: 'date_created',
     numeric: true,
   },
   {
-    width: 100,
+    width: 200,
     label: 'Actions',
     dataKey: 'actions',
   }
@@ -108,12 +108,23 @@ function rowContent({
         <TableCell
           key={column.dataKey}
           align={column.numeric || false ? 'right' : 'left'}
+          sx={{
+            minHeight: column.dataKey === 'actions' ? 64 : 'auto',
+            verticalAlign: 'middle'
+          }}
         >
           {column.dataKey === 'date_created'
             ? formatDate(row[column.dataKey], 'Pp')
             : (column.dataKey === 'actions'
               ? (
-                <Box sx={{display: 'flex', gap: 0.5, alignItems: 'center'}}>
+                <Box sx={{
+                  display: 'flex',
+                  gap: 0.3,
+                  alignItems: 'center',
+                  flexWrap: 'wrap',
+                  justifyContent: 'flex-start'
+                }}
+                >
                   <CopyButton
                     content={row.delta?.contenu || row.name || ''}
                     label='Copier le contenu'
@@ -138,6 +149,7 @@ function rowContent({
                     size='small'
                     variant='outlined'
                     color='primary'
+                    sx={{minWidth: 'auto', px: 1}}
                     onClick={() => handleButtonClick(row.id)}
                   >
                     Comparer