From 8c33e4cdae2c747f090bbf27652e36e63f76fd82 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Sat, 16 Nov 2024 21:17:36 +0530
Subject: [PATCH] fix: Checkbox column width should be fixed (#8489)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

- This PR adds the functionality of fixed column width across all boards
- This PR fixes the issue
#8463
#8331

<img width="1167" alt="Screenshot 2024-11-14 at 12 19 02 PM"
src="https://github.com/user-attachments/assets/7c2b1016-2a59-4d08-8d29-9558648bcd67">

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../components/RecordTableLastEmptyCell.tsx   |  7 ++++-
 .../RecordTableHeaderCheckboxColumn.tsx       |  4 +--
 .../RecordTableHeaderLastColumn.tsx           | 30 +++++++++----------
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell.tsx
index c8f5bccdf..8dd8112a2 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell.tsx
@@ -6,5 +6,10 @@ import { RecordTableTd } from '@/object-record/record-table/record-table-cell/co
 export const RecordTableLastEmptyCell = () => {
   const { isSelected } = useContext(RecordTableRowContext);
 
-  return <RecordTableTd isSelected={isSelected} hasRightBorder={false} />;
+  return (
+    <>
+      <RecordTableTd isSelected={isSelected} hasRightBorder={false} />
+      <RecordTableTd isSelected={isSelected} hasRightBorder={false} />
+    </>
+  );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
index 6cb3894da..4dd54f6b4 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
@@ -17,8 +17,6 @@ const StyledColumnHeaderCell = styled.th`
   background-color: ${({ theme }) => theme.background.primary};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   border-right: transparent;
-  max-width: 30px;
-  min-width: 30px;
   width: 30px;
 `;
 
@@ -28,7 +26,6 @@ export const RecordTableHeaderCheckboxColumn = () => {
   );
   const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } =
     useRecordTable();
-
   const checked = allRowsSelectedStatus === 'all';
   const indeterminate = allRowsSelectedStatus === 'some';
 
@@ -37,6 +34,7 @@ export const RecordTableHeaderCheckboxColumn = () => {
       setHasUserSelectedAllRows(true);
       selectAllRows();
     } else {
+      setHasUserSelectedAllRows(false);
       resetTableRowSelection();
     }
   };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
index 9b20a28c6..ff470e7ad 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
@@ -5,10 +5,8 @@ import { IconPlus, ThemeContext } from 'twenty-ui';
 
 import { HIDDEN_TABLE_COLUMN_DROPDOWN_ID } from '@/object-record/record-table/constants/HiddenTableColumnDropdownId';
 import { RecordTableHeaderPlusButtonContent } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent';
-import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const StyledPlusIconHeaderCell = styled.th<{
   theme: Theme;
@@ -25,9 +23,8 @@ const StyledPlusIconHeaderCell = styled.th<{
   background-color: ${({ theme }) => theme.background.primary};
   border-left: none !important;
   color: ${({ theme }) => theme.font.color.tertiary};
-  min-width: 32px;
-  width: 32px;
   border-right: none !important;
+  width: 32px;
 
   ${({ isTableWiderThanScreen, theme }) =>
     isTableWiderThanScreen
@@ -38,6 +35,12 @@ const StyledPlusIconHeaderCell = styled.th<{
   z-index: 1;
 `;
 
+const StyledEmptyHeaderCell = styled.th`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  background-color: ${({ theme }) => theme.background.primary};
+  width: 100%;
+`;
+
 const StyledPlusIconContainer = styled.div`
   align-items: center;
   display: flex;
@@ -58,16 +61,12 @@ export const RecordTableHeaderLastColumn = () => {
     (scrollWrapper.ref.current?.clientWidth ?? 0) <
     (scrollWrapper.ref.current?.scrollWidth ?? 0);
 
-  const hiddenTableColumns = useRecoilComponentValueV2(
-    hiddenTableColumnsComponentSelector,
-  );
-
   return (
-    <StyledPlusIconHeaderCell
-      theme={theme}
-      isTableWiderThanScreen={isTableWiderThanScreen}
-    >
-      {hiddenTableColumns.length > 0 && (
+    <>
+      <StyledPlusIconHeaderCell
+        theme={theme}
+        isTableWiderThanScreen={isTableWiderThanScreen}
+      >
         <Dropdown
           dropdownId={HIDDEN_TABLE_COLUMN_DROPDOWN_ID}
           clickableComponent={
@@ -81,7 +80,8 @@ export const RecordTableHeaderLastColumn = () => {
             scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID,
           }}
         />
-      )}
-    </StyledPlusIconHeaderCell>
+      </StyledPlusIconHeaderCell>
+      <StyledEmptyHeaderCell />
+    </>
   );
 };