fix: Checkbox column width should be fixed (twentyhq#8489)

## Description - This PR adds the functionality of fixed column width across all boards - This PR fixes the issue twentyhq#8463 twentyhq#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 <[email protected]>
ehconitin · Nov 16, 2024 · 8c33e4c · 8c33e4c
1 parent 859ce89
commit 8c33e4c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/...ules/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell.tsx b/...ules/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/...ct-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/...ct-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/...object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx b/...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 />
+    </>
   );
 };