From 8de2d345edf1fc2572a137f24600a1264588ac92 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Tue, 25 Apr 2023 12:14:31 +0200
Subject: [PATCH] Add horizontal scroll on tables

---
 front/src/components/table/Table.tsx          | 100 ++++++++++--------
 front/src/layout/AppLayout.tsx                |   1 +
 .../layout/containers/WithTopBarContainer.tsx |   2 +
 3 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx
index c6c86287db..905cb71a07 100644
--- a/front/src/components/table/Table.tsx
+++ b/front/src/components/table/Table.tsx
@@ -21,7 +21,8 @@ type OwnProps<TData> = {
 };
 
 const StyledTable = styled.table`
-  min-width: calc(100% - ${(props) => props.theme.spacing(4)});
+  min-width: 1000px;
+  width: calc(100% - ${(props) => props.theme.spacing(4)});
   border-radius: 4px;
   border-spacing: 0;
   border-collapse: collapse;
@@ -61,6 +62,13 @@ const StyledTableWithHeader = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
+  width: 100%;
+`;
+
+const StyledTableScrollableContainer = styled.div`
+  overflow: auto;
+  height: 100%;
+  flex: 1;
 `;
 
 function Table<TData>({
@@ -85,58 +93,64 @@ function Table<TData>({
         onSortsUpdate={onSortsUpdate}
         sortsAvailable={sortsAvailable || []}
       />
-      <StyledTable>
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <th key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row, index) => (
-            <tr key={row.id} data-testid={`row-id-${row.index}`}>
-              {row.getVisibleCells().map((cell) => {
-                return (
-                  <td key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                );
-              })}
-            </tr>
-          ))}
-        </tbody>
-        {table
-          .getFooterGroups()
-          .flatMap((group) => group.headers)
-          .filter((header) => !!header.column.columnDef.footer).length > 0 && (
-          <tfoot>
-            {table.getFooterGroups().map((footerGroup) => (
-              <tr key={footerGroup.id}>
-                {footerGroup.headers.map((header) => (
+      <StyledTableScrollableContainer>
+        <StyledTable>
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
                   <th key={header.id}>
                     {header.isPlaceholder
                       ? null
                       : flexRender(
-                          header.column.columnDef.footer,
+                          header.column.columnDef.header,
                           header.getContext(),
                         )}
                   </th>
                 ))}
               </tr>
             ))}
-          </tfoot>
-        )}
-      </StyledTable>
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row, index) => (
+              <tr key={row.id} data-testid={`row-id-${row.index}`}>
+                {row.getVisibleCells().map((cell) => {
+                  return (
+                    <td key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+          {table
+            .getFooterGroups()
+            .flatMap((group) => group.headers)
+            .filter((header) => !!header.column.columnDef.footer).length >
+            0 && (
+            <tfoot>
+              {table.getFooterGroups().map((footerGroup) => (
+                <tr key={footerGroup.id}>
+                  {footerGroup.headers.map((header) => (
+                    <th key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.footer,
+                            header.getContext(),
+                          )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </tfoot>
+          )}
+        </StyledTable>
+      </StyledTableScrollableContainer>
     </StyledTableWithHeader>
   );
 }
diff --git a/front/src/layout/AppLayout.tsx b/front/src/layout/AppLayout.tsx
index 8386dbeb39..e8ac2f1ff9 100644
--- a/front/src/layout/AppLayout.tsx
+++ b/front/src/layout/AppLayout.tsx
@@ -16,6 +16,7 @@ const StyledRightContainer = styled.div`
   display: flex;
   flex-direction: row;
   flex: 1;
+  overflow: hidden;
 `;
 
 type OwnProps = {
diff --git a/front/src/layout/containers/WithTopBarContainer.tsx b/front/src/layout/containers/WithTopBarContainer.tsx
index fce239b2ec..2749ca0b52 100644
--- a/front/src/layout/containers/WithTopBarContainer.tsx
+++ b/front/src/layout/containers/WithTopBarContainer.tsx
@@ -12,6 +12,7 @@ const StyledContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
+  overflow: hidden;
 `;
 
 const ContentContainer = styled.div`
@@ -21,6 +22,7 @@ const ContentContainer = styled.div`
   flex: 1;
   padding-right: ${(props) => props.theme.spacing(3)};
   padding-bottom: ${(props) => props.theme.spacing(3)};
+  width: calc(100% - ${(props) => props.theme.spacing(3)});
 `;
 
 const ContentSubContainer = styled.div`