From 8410e580302e4c5919c7e3dce14efe95b3a92383 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Fri, 11 Oct 2024 15:37:45 +0200
Subject: [PATCH] Fix the width of the tables' columns

---
 .../table/expansion-controls/index.tsx        |  3 ++-
 .../map/content/details/table/index.tsx       | 21 +++++++++++++++----
 .../tables/national-highseas/hooks.tsx        |  1 +
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/containers/map/content/details/table/expansion-controls/index.tsx b/frontend/src/containers/map/content/details/table/expansion-controls/index.tsx
index ec77fad8..3821499e 100644
--- a/frontend/src/containers/map/content/details/table/expansion-controls/index.tsx
+++ b/frontend/src/containers/map/content/details/table/expansion-controls/index.tsx
@@ -24,7 +24,7 @@ const ExpansionControls: React.FC<ExpansionControlsProps> = ({ row, children })
   const toggleExpanded = getToggleExpandedHandler();
 
   return (
-    <div className="flex items-center">
+    <div className="flex max-w-full items-center">
       {isRowExpandable && (
         <button
           type="button"
@@ -42,6 +42,7 @@ const ExpansionControls: React.FC<ExpansionControlsProps> = ({ row, children })
       )}
       <span
         className={cn({
+          'w-full overflow-hidden whitespace-normal': true,
           'flex items-center pl-3': !isParentRow,
           'ml-6': isParentRow && !isRowExpandable,
         })}
diff --git a/frontend/src/containers/map/content/details/table/index.tsx b/frontend/src/containers/map/content/details/table/index.tsx
index af99b9a6..7a71cfe8 100644
--- a/frontend/src/containers/map/content/details/table/index.tsx
+++ b/frontend/src/containers/map/content/details/table/index.tsx
@@ -58,6 +58,9 @@ const MapTable: MapTableProps<unknown> = <TData,>({
     onSortingChange,
     onPaginationChange,
     rowCount,
+    defaultColumn: {
+      size: 200,
+    },
   });
 
   // NOTE: do not memoize so that the table is re-rendered if the data changes
@@ -95,11 +98,16 @@ const MapTable: MapTableProps<unknown> = <TData,>({
                     ref={isFirstColumn ? firstColumnRef : null}
                     className={cn({
                       'border-r border-dashed border-black': shouldAddColumnSeparator(id),
-                      'h-10': true,
-                      'pl-6 pr-16': !isMapColumn,
+                      'h-10 overflow-hidden': true,
+                      'px-6': !isMapColumn,
                       'pl-0 pr-5': isFirstColumn,
                       'pr-0': isLastColumn,
                     })}
+                    style={{
+                      minWidth: column.getSize() ? `${column.getSize()}px` : undefined,
+                      width: column.getSize() ? `${column.getSize()}px` : undefined,
+                      maxWidth: column.getSize() ? `${column.getSize()}px` : undefined,
+                    }}
                   >
                     {flexRender(column.columnDef.header, header.getContext())}
                   </th>
@@ -135,8 +143,8 @@ const MapTable: MapTableProps<unknown> = <TData,>({
                       <td
                         key={cell.id}
                         className={cn({
-                          'h-16 pl-6': true,
-                          'pl-6 pr-16 ': !isMapColumn,
+                          'overflow-hidden whitespace-normal py-5 pl-6': true,
+                          'px-6 ': !isMapColumn,
                           '-mt-px -mb-px': isMapColumn,
                           'pl-0 pr-5': isFirstColumn,
                           'pr-0': isLastColumn,
@@ -144,6 +152,11 @@ const MapTable: MapTableProps<unknown> = <TData,>({
                             column.id
                           ),
                         })}
+                        style={{
+                          minWidth: column.getSize() ? `${column.getSize()}px` : undefined,
+                          width: column.getSize() ? `${column.getSize()}px` : undefined,
+                          maxWidth: column.getSize() ? `${column.getSize()}px` : undefined,
+                        }}
                       >
                         {flexRender(column.columnDef.cell, cell.getContext())}
                       </td>
diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/hooks.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/hooks.tsx
index a58ce60d..46bfab5e 100644
--- a/frontend/src/containers/map/content/details/tables/national-highseas/hooks.tsx
+++ b/frontend/src/containers/map/content/details/tables/national-highseas/hooks.tsx
@@ -269,6 +269,7 @@ export const useColumns = (
             </ExpansionControls>
           );
         },
+        size: 300,
       },
       {
         id: 'environment.name',