diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts index 65036a78e1c2..5a4e015feee3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts @@ -54,6 +54,23 @@ export const useRecordTable = (props?: useRecordTableProps) => { recordTableId, ); + const numColumnsState = useRecoilComponentCallbackStateV2( + tableColumnsComponentState, + recordTableId, + ); + + const setNumColumns = useRecoilCallback( + ({ snapshot }) => + () => { + const tableColumns = getSnapshotValue( + snapshot, + numColumnsState, + ); + return tableColumns?.filter(column => column.isVisible).length || 0; + }, + [numColumnsState], + )(); + const setAvailableTableColumns = useRecoilCallback( ({ snapshot, set }) => (columns: ColumnDefinition[]) => { @@ -273,5 +290,6 @@ export const useRecordTable = (props?: useRecordTableProps) => { setOnToggleColumnFilter, setOnToggleColumnSort, setPendingRecordId, + setNumColumns, }; }; 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 6cb3894da8db..9bb63e85e903 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 @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { Checkbox } from 'twenty-ui'; +import { Checkbox, MOBILE_VIEWPORT } from 'twenty-ui'; const StyledContainer = styled.div` align-items: center; @@ -13,21 +13,30 @@ const StyledContainer = styled.div` background-color: ${({ theme }) => theme.background.primary}; `; -const StyledColumnHeaderCell = styled.th` +const StyledColumnHeaderCell = styled.th<{ setNumColumns: number }>` 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; + text-align: center; + width: ${({ setNumColumns }) => { + return setNumColumns <= 6 ? '22px' : '32px'; + }}; + + @media (max-width: ${MOBILE_VIEWPORT}px) { + width: 32px; + } `; export const RecordTableHeaderCheckboxColumn = () => { const allRowsSelectedStatus = useRecoilComponentValueV2( allRowsSelectedStatusComponentSelector, ); - const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } = - useRecordTable(); + const { + selectAllRows, + resetTableRowSelection, + setHasUserSelectedAllRows, + setNumColumns, + } = useRecordTable(); const checked = allRowsSelectedStatus === 'all'; const indeterminate = allRowsSelectedStatus === 'some'; @@ -37,12 +46,13 @@ export const RecordTableHeaderCheckboxColumn = () => { setHasUserSelectedAllRows(true); selectAllRows(); } else { + setHasUserSelectedAllRows(false); resetTableRowSelection(); } }; return ( - +