Fix table footer cell resize issue (#14552)

This PR fixes issues about the resizing of footer cell.

Fixes in https://github.com/twentyhq/core-team-issues/issues/1490 :
- Resizing doesn't move footer cell
- Fix column min width (create a constant file with 104px)

packages/twenty-front/src/modules/object-record/record-table/constants/ColumnMinWidth.ts

@@ -1 +0,0 @@
-export const COLUMN_MIN_WIDTH = 48;

packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnMinWidth.ts

@@ -0,0 +1 @@
+export const RECORD_TABLE_COLUMN_MIN_WIDTH = 104;

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx

@@ -76,7 +76,7 @@ export const RecordTableAggregateFooter = ({
           >
             <RecordTableAggregateFooterCell
               currentRecordGroupId={currentRecordGroupId}
-              isFirstCell={index === 0}
+              columnIndex={index}
             />
           </RecordTableColumnAggregateFooterCellContext.Provider>
         );

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx

@@ -7,6 +7,8 @@ import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZInde
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext';
 import { RecordTableColumnFooterWithDropdown } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterWithDropdown';
+import { getRecordTableColumnFieldWidthClassName } from '@/object-record/record-table/utils/getRecordTableColumnFieldWidthClassName';
+import { cx } from '@linaria/core';
 import { findByProperty, isDefined } from 'twenty-shared/utils';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
@@ -18,6 +20,8 @@ const StyledColumnFooterCell = styled.div<{
   background-color: ${({ theme }) => theme.background.primary};
   color: ${({ theme }) => theme.font.color.tertiary};
 
+  border-right: solid 1px ${({ theme }) => theme.background.primary};
+
   padding: 0;
 
   ${({ columnWidth }) => `
@@ -63,10 +67,10 @@ const StyledColumnFootContainer = styled.div`
 `;
 
 export const RecordTableAggregateFooterCell = ({
-  isFirstCell = false,
+  columnIndex,
   currentRecordGroupId,
 }: {
-  isFirstCell?: boolean;
+  columnIndex: number;
   currentRecordGroupId?: string;
 }) => {
   const { visibleRecordFields } = useRecordTableContextOrThrow();
@@ -81,6 +85,8 @@ export const RecordTableAggregateFooterCell = ({
 
   const isTableWithGroups = isDefined(currentRecordGroupId);
 
+  const isFirstCell = columnIndex === 0;
+
   if (!isDefined(recordField)) {
     return null;
   }
@@ -89,7 +95,10 @@ export const RecordTableAggregateFooterCell = ({
     <StyledColumnFooterCell
       columnWidth={recordField.size + 1}
       isFirstCell={isFirstCell}
-      className={'footer-cell'}
+      className={cx(
+        'footer-cell',
+        getRecordTableColumnFieldWidthClassName(columnIndex),
+      )}
       isTableWithGroups={isTableWithGroups}
     >
       <StyledColumnFootContainer>

packages/twenty-front/src/modules/object-record/record-table/record-table-header/hooks/useResizeTableHeader.ts

@@ -1,7 +1,7 @@
 import { useUpdateRecordField } from '@/object-record/record-field/hooks/useUpdateRecordField';
 
-import { COLUMN_MIN_WIDTH } from '@/object-record/record-table/constants/ColumnMinWidth';
 import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthVariableName';
+import { RECORD_TABLE_COLUMN_MIN_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnMinWidth';
 import { RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME } from '@/object-record/record-table/constants/RecordTableColumnWithGroupLastEmptyColumnWidthVariableName';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
@@ -75,7 +75,7 @@ export const useResizeTableHeader = () => {
 
       const newRecordFieldSizeWithOffset = recordField.size + newResizeOffset;
 
-      if (newRecordFieldSizeWithOffset < COLUMN_MIN_WIDTH) {
+      if (newRecordFieldSizeWithOffset < RECORD_TABLE_COLUMN_MIN_WIDTH) {
         return;
       }
 
@@ -133,7 +133,10 @@ export const useResizeTableHeader = () => {
         );
 
         const nextWidth = Math.round(
-          Math.max(recordField.size + resizeFieldOffset, COLUMN_MIN_WIDTH),
+          Math.max(
+            recordField.size + resizeFieldOffset,
+            RECORD_TABLE_COLUMN_MIN_WIDTH,
+          ),
         );
 
         set(resizeFieldOffsetCallbackState, 0);