From aff3a300fe5d6726b5cd015fe6e2530f6d76c513 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Fri, 19 Sep 2025 17:19:26 +0200 Subject: [PATCH] Refactored table width and height constants (#14613) This PR essentially refactors some hard-coded values for width and height in the table. It also fixes a few differences from the Figma design, on the checkbox column width and the top bar and view bar left alignment with the table. The blue color has been set like before the refactor of the focus portal (`theme.adaptiveColors.blue4`) Fixes in https://github.com/twentyhq/core-team-issues/issues/1490 : - Fix first drag and drop column width that has changed from main (see Figma) - Unify all widths, heights, z-index, etc. with constants - Put same blue as before for focused portal Also removed `focus-active` class because we now use a portal for the focus. --- .../RecordTableScrollToFocusedCellEffect.tsx | 5 ++-- .../RecordTableScrollToFocusedRowEffect.tsx | 5 ++-- .../components/RecordTableStyleWrapper.tsx | 13 +++++---- .../RecordTableColumnCheckboxWidth.ts | 2 +- .../RecordTableColumnDragAndDropWidth.ts | 2 +- .../RecordTableBodyFetchMoreLoader.tsx | 3 +- .../components/RecordTableBodyLoading.tsx | 4 +-- .../RecordTableCellBaseContainer.tsx | 12 ++------ .../components/RecordTableCellCheckbox.tsx | 9 +++--- ...rip.tsx => RecordTableCellDragAndDrop.tsx} | 5 ++-- .../RecordTableCellFocusedPortalContent.tsx | 5 ++-- .../RecordTableCellHoveredPortalContent.tsx | 3 +- .../RecordTableDragAndDropPlaceholderCell.tsx | 0 .../useSetIsRecordTableFocusActive.test.tsx | 16 ++-------- .../hooks/useFocusRecordTableCell.ts | 17 +++-------- .../useSetIsRecordTableCellFocusActive.ts | 29 ++++++++++--------- .../RecordTableAggregateFooterCell.tsx | 4 ++- .../RecordTableColumnAggregateFooterValue.tsx | 3 +- ...ordTableColumnAggregateFooterValueCell.tsx | 5 ++-- .../RecordTableHeaderCheckboxColumn.tsx | 8 +++-- .../RecordTableHeaderDragDropColumn.tsx | 12 ++++---- .../RecordTableHeaderLastEmptyColumn.tsx | 5 ++-- .../components/RecordTableActionRow.tsx | 8 +++-- .../components/RecordTableRow.tsx | 6 ++-- .../RecordTableRecordGroupSection.tsx | 12 ++++---- .../components/OverridableCheckbox.tsx | 5 +++- .../StyledDropdownButtonContainer.tsx | 2 +- .../ui/layout/top-bar/components/TopBar.tsx | 2 +- .../views/components/ViewBarDetails.tsx | 1 - 29 files changed, 103 insertions(+), 100 deletions(-) rename packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/{RecordTableCellGrip.tsx => RecordTableCellDragAndDrop.tsx} (89%) rename packages/twenty-front/src/modules/object-record/record-table/{record-table-row => record-table-cell}/components/RecordTableDragAndDropPlaceholderCell.tsx (100%) diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedCellEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedCellEffect.tsx index d04cdbbc5e..272b0efeb7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedCellEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedCellEffect.tsx @@ -1,3 +1,4 @@ +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState'; import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState'; @@ -51,8 +52,8 @@ export const RecordTableScrollToFocusedCellEffect = () => { } } - focusElement.style.scrollMarginTop = '32px'; - focusElement.style.scrollMarginBottom = '32px'; + focusElement.style.scrollMarginTop = `${RECORD_TABLE_ROW_HEIGHT}px`; + focusElement.style.scrollMarginBottom = `${RECORD_TABLE_ROW_HEIGHT}px`; focusElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedRowEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedRowEffect.tsx index 50ab9f0bc1..2e87a301b6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedRowEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedRowEffect.tsx @@ -1,4 +1,5 @@ import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { focusedRecordTableRowIndexComponentState } from '@/object-record/record-table/states/focusedRecordTableRowIndexComponentState'; import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState'; @@ -47,8 +48,8 @@ export const RecordTableScrollToFocusedRowEffect = () => { return; } - focusElement.style.scrollMarginBottom = '32px'; - focusElement.style.scrollMarginTop = '32px'; + focusElement.style.scrollMarginBottom = `${RECORD_TABLE_ROW_HEIGHT}px`; + focusElement.style.scrollMarginTop = `${RECORD_TABLE_ROW_HEIGHT}px`; focusElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx index 580d5c1c1a..2b4b2d93b0 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx @@ -98,7 +98,7 @@ const StyledTable = styled.div<{ } div.header-cell:nth-of-type(2) { - left: 16px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; top: 0; background-color: ${({ theme }) => theme.background.primary}; @@ -110,7 +110,8 @@ const StyledTable = styled.div<{ } div.header-cell:nth-of-type(3) { - left: 48px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; right: 0; background-color: ${({ theme }) => theme.background.primary}; @@ -140,7 +141,7 @@ const StyledTable = styled.div<{ div.table-cell:nth-of-type(2) { position: sticky; - left: 16px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; z-index: ${({ hasRecordGroups }) => hasRecordGroups ? TABLE_Z_INDEX.cell.withGroups.sticky @@ -149,14 +150,16 @@ const StyledTable = styled.div<{ div.table-cell-0-0 { position: sticky; - left: 48px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; ${HorizontalScrollBoxShadowCSS} } div.table-cell:nth-of-type(3) { position: sticky; - left: 48px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; z-index: ${({ hasRecordGroups }) => hasRecordGroups ? TABLE_Z_INDEX.cell.withGroups.sticky diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnCheckboxWidth.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnCheckboxWidth.ts index 635f878bd4..9ce2802cf3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnCheckboxWidth.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnCheckboxWidth.ts @@ -1 +1 @@ -export const RECORD_TABLE_COLUMN_CHECKBOX_WIDTH = 32; +export const RECORD_TABLE_COLUMN_CHECKBOX_WIDTH = 28; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnDragAndDropWidth.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnDragAndDropWidth.ts index 84383d2e0e..90fe7a28ba 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnDragAndDropWidth.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnDragAndDropWidth.ts @@ -1 +1 @@ -export const RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH = 16; +export const RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH = 12; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx index 16be658e1d..f8dc527e0f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx @@ -3,6 +3,7 @@ import { useInView } from 'react-intersection-observer'; import { useRecoilState } from 'recoil'; import { useRecordIndexTableFetchMore } from '@/object-record/record-index/hooks/useRecordIndexTableFetchMore'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { hasRecordTableFetchedAllRecordsComponentState } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentState'; import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; @@ -15,7 +16,7 @@ const StyledText = styled.div` box-shadow: none; color: ${GRAY_SCALE.gray40}; display: flex; - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; margin-left: ${({ theme }) => theme.spacing(8)}; padding-left: ${({ theme }) => theme.spacing(2)}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx index 3c189622e3..66491a033d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx @@ -3,7 +3,7 @@ import { RecordTableRowContextProvider } from '@/object-record/record-table/cont import { RecordTableRowDraggableContextProvider } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext'; import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody'; import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox'; -import { RecordTableCellGrip } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip'; +import { RecordTableCellDragAndDrop } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop'; import { RecordTableCellLoading } from '@/object-record/record-table/record-table-cell/components/RecordTableCellLoading'; import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell'; import { RecordTablePlusButtonCellPlaceholder } from '@/object-record/record-table/record-table-cell/components/RecordTablePlusButtonCellPlaceholder'; @@ -40,7 +40,7 @@ export const RecordTableBodyLoading = () => { data-selectable-id={`row-id-${rowIndex}`} isFirstRowOfGroup={rowIndex === 0} > - + {visibleRecordFields.map((recordField, index) => ( ` align-items: center; box-sizing: border-box; cursor: ${({ isReadOnly }) => (isReadOnly ? 'default' : 'pointer')}; display: flex; - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; user-select: none; position: relative; - &.focus-active { - border-radius: ${BORDER_COMMON.radius.sm}; - outline: 1px solid ${({ borderColorBlue }) => borderColorBlue}; - } - &:hover { ${(props) => { if (!props.isReadOnly) return ''; @@ -103,7 +98,6 @@ export const RecordTableCellBaseContainer = ({ fontColorExtraLight={theme.font.color.extraLight} fontColorSecondary={theme.font.color.secondary} fontColorMedium={theme.border.color.medium} - borderColorBlue={theme.adaptiveColors.blue4} isReadOnly={isReadOnly ?? false} id={`record-table-cell-${cellPosition.column}-${cellPosition.row}`} data-click-outside-id={ diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx index 75c3195727..cb3e81ea1d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx @@ -1,22 +1,23 @@ import styled from '@emotion/styled'; import { useCallback } from 'react'; +import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth'; import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidthClassName'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext'; import { RecordTableCellStyleWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper'; import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected'; import { isDefined } from 'twenty-shared/utils'; import { Checkbox } from 'twenty-ui/input'; -export const TABLE_CELL_CHECKBOX_MIN_WIDTH = '24px'; - const StyledContainer = styled.div` align-items: center; cursor: pointer; display: flex; - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; justify-content: center; - min-width: ${TABLE_CELL_CHECKBOX_MIN_WIDTH}; + min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}; + width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}; padding-right: ${({ theme }) => theme.spacing(1)}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx similarity index 89% rename from packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx rename to packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx index 288901af76..2ae657fe59 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx @@ -1,13 +1,14 @@ import styled from '@emotion/styled'; import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidthClassName'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex'; import { useRecordTableRowDraggableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext'; import { RecordTableCellStyleWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper'; import { IconListViewGrip } from 'twenty-ui/input'; const StyledContainer = styled.div` - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; border-color: transparent; cursor: grab; display: flex; @@ -27,7 +28,7 @@ const StyledIconWrapper = styled.div<{ isDragging: boolean }>` } `; -export const RecordTableCellGrip = () => { +export const RecordTableCellDragAndDrop = () => { const { dragHandleProps, isDragging } = useRecordTableRowDraggableContextOrThrow(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx index 65b102a32d..3051db1461 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx @@ -1,4 +1,5 @@ import { FieldDisplay } from '@/object-record/record-field/ui/components/FieldDisplay'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext'; import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext'; import { RecordTableCellDisplayMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode'; @@ -23,9 +24,9 @@ const StyledRecordTableCellFocusPortalContent = styled.div<{ box-sizing: border-box; display: flex; - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; - outline: ${({ theme }) => `1px solid ${theme.color.blue}`}; + outline: ${({ theme }) => `1px solid ${theme.adaptiveColors.blue4}`}; user-select: none; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHoveredPortalContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHoveredPortalContent.tsx index 352187df4c..6d9e9e0a21 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHoveredPortalContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHoveredPortalContent.tsx @@ -1,6 +1,7 @@ import { FieldDisplay } from '@/object-record/record-field/ui/components/FieldDisplay'; import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext'; import { useIsFieldInputOnly } from '@/object-record/record-field/ui/hooks/useIsFieldInputOnly'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext'; import { RecordTableCellDisplayMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode'; import { RecordTableCellEditButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellEditButton'; @@ -30,7 +31,7 @@ const StyledRecordTableCellHoveredPortalContent = styled.div<{ cursor: ${({ isReadOnly }) => (isReadOnly ? 'default' : 'pointer')}; display: flex; - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; outline: ${({ theme, isReadOnly, isRowActive }) => isRowActive diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDragAndDropPlaceholderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell.tsx similarity index 100% rename from packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDragAndDropPlaceholderCell.tsx rename to packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSetIsRecordTableFocusActive.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSetIsRecordTableFocusActive.test.tsx index cfabff03fd..219a9a0f1d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSetIsRecordTableFocusActive.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSetIsRecordTableFocusActive.test.tsx @@ -46,11 +46,13 @@ const renderHooks = () => { () => { const { setIsRecordTableCellFocusActive } = useSetIsRecordTableCellFocusActive('test-table-id'); + const isRecordTableFocusActive = useRecoilValue( isRecordTableCellFocusActiveComponentState.atomFamily({ instanceId: 'test-table-id', }), ); + const focusPosition = useRecoilValue( recordTableFocusPositionComponentState.atomFamily({ instanceId: 'test-table-id', @@ -89,10 +91,6 @@ describe('useSetIsRecordTableFocusActive', () => { }); }); - expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0'); - - expect(mockClassList.add).toHaveBeenCalledWith('focus-active'); - expect(result.current.isRecordTableFocusActive).toBe(true); expect(result.current.focusPosition).toEqual(cellPosition); @@ -110,13 +108,9 @@ describe('useSetIsRecordTableFocusActive', () => { }); }); - expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0'); - - expect(mockClassList.remove).toHaveBeenCalledWith('focus-active'); - expect(result.current.isRecordTableFocusActive).toBe(false); - expect(result.current.focusPosition).toEqual(cellPosition); + expect(result.current.focusPosition).toEqual(null); }); it('should handle case when the cell element is not found', () => { @@ -133,10 +127,6 @@ describe('useSetIsRecordTableFocusActive', () => { }); }); - expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0'); - - expect(mockClassList.add).not.toHaveBeenCalled(); - expect(result.current.isRecordTableFocusActive).toBe(true); expect(result.current.focusPosition).toEqual(cellPosition); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell.ts index 5ffcdfca40..340329ee10 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell.ts @@ -17,7 +17,7 @@ export const useFocusRecordTableCell = (recordTableId?: string) => { recordTableId, ); - const focusPositionState = useRecoilComponentCallbackState( + const focusPositionCallbackState = useRecoilComponentCallbackState( recordTableFocusPositionComponentState, recordTableIdFromProps, ); @@ -30,10 +30,10 @@ export const useFocusRecordTableCell = (recordTableId?: string) => { useRemoveFocusItemFromFocusStackById(); const focusRecordTableCell = useRecoilCallback( - ({ set, snapshot }) => { + ({ snapshot }) => { return (newPosition: TableCellPosition) => { const currentPosition = snapshot - .getLoadable(focusPositionState) + .getLoadable(focusPositionCallbackState) .getValue(); if (isDefined(currentPosition)) { @@ -47,15 +47,6 @@ export const useFocusRecordTableCell = (recordTableId?: string) => { }); } - set(focusPositionState, newPosition); - - if (isDefined(currentPosition)) { - setIsRecordTableCellFocusActive({ - isRecordTableFocusActive: false, - cellPosition: currentPosition, - }); - } - setIsRecordTableCellFocusActive({ isRecordTableFocusActive: true, cellPosition: newPosition, @@ -76,7 +67,7 @@ export const useFocusRecordTableCell = (recordTableId?: string) => { }; }, [ - focusPositionState, + focusPositionCallbackState, recordTableIdFromProps, removeFocusItemFromFocusStackById, setIsRecordTableCellFocusActive, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableCellFocusActive.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableCellFocusActive.ts index b9159efb5c..25d5268ad3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableCellFocusActive.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableCellFocusActive.ts @@ -1,14 +1,20 @@ import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState'; +import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState'; import { type TableCellPosition } from '@/object-record/record-table/types/TableCellPosition'; import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; import { useRecoilCallback } from 'recoil'; export const useSetIsRecordTableCellFocusActive = (recordTableId?: string) => { - const isRecordTableFocusActiveState = useRecoilComponentCallbackState( + const isRecordTableFocusActiveCallbackState = useRecoilComponentCallbackState( isRecordTableCellFocusActiveComponentState, recordTableId, ); + const recordTableFocusPositionCallbackState = useRecoilComponentCallbackState( + recordTableFocusPositionComponentState, + recordTableId, + ); + const setIsRecordTableCellFocusActive = useRecoilCallback( ({ set }) => ({ @@ -18,21 +24,18 @@ export const useSetIsRecordTableCellFocusActive = (recordTableId?: string) => { isRecordTableFocusActive: boolean; cellPosition: TableCellPosition; }) => { - const cellId = `record-table-cell-${cellPosition.column}-${cellPosition.row}`; - - const cellElement = document.getElementById(cellId); - if (isRecordTableFocusActive) { - cellElement?.classList.add('focus-active'); + set(isRecordTableFocusActiveCallbackState, true); + set(recordTableFocusPositionCallbackState, cellPosition); + } else { + set(isRecordTableFocusActiveCallbackState, false); + set(recordTableFocusPositionCallbackState, null); } - - if (!isRecordTableFocusActive) { - cellElement?.classList.remove('focus-active'); - } - - set(isRecordTableFocusActiveState, isRecordTableFocusActive); }, - [isRecordTableFocusActiveState], + [ + isRecordTableFocusActiveCallbackState, + recordTableFocusPositionCallbackState, + ], ); return { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx index 496d970256..143cd90d9e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx @@ -1,6 +1,8 @@ import styled from '@emotion/styled'; import { useContext } from 'react'; +import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth'; +import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth'; import { RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE } from '@/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile'; import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex'; @@ -56,7 +58,7 @@ const StyledColumnFooterCell = styled.div<{ ${({ isFirstCell, isTableWithGroups }) => isFirstCell - ? `left: 48px; z-index: ${isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.stickyColumn : TABLE_Z_INDEX.footer.tableWithoutGroups.stickyColumn};` + ? `left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; z-index: ${isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.stickyColumn : TABLE_Z_INDEX.footer.tableWithoutGroups.stickyColumn};` : `z-index: ${isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.default : TABLE_Z_INDEX.footer.tableWithoutGroups.default};`} `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx index f6d4043997..c32dc84792 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx @@ -1,3 +1,4 @@ +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useAggregateRecordsForRecordTableColumnFooter } from '@/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter'; import styled from '@emotion/styled'; import { Trans } from '@lingui/react/macro'; @@ -33,7 +34,7 @@ const StyledValueContainer = styled(StyledScrollableContainer)` align-items: center; display: flex; gap: 4px; - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; justify-content: flex-end; padding: 0 8px; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx index 92b237f9e5..d2d8b5ef73 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx @@ -1,5 +1,6 @@ import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector'; -import { TABLE_CELL_CHECKBOX_MIN_WIDTH } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox'; +import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth'; + import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext'; import { RecordTableColumnAggregateFooterValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue'; import { hasAggregateOperationForViewFieldFamilySelector } from '@/object-record/record-table/record-table-footer/states/hasAggregateOperationForViewFieldFamilySelector'; @@ -33,7 +34,7 @@ const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>` ${({ isFirstCell, theme }) => isFirstCell && ` - padding-left: calc(${TABLE_CELL_CHECKBOX_MIN_WIDTH} + ${theme.spacing(1)}); + padding-left: calc(${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH} + ${theme.spacing(1)}); `} `; 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 7347cf0609..e633d428bf 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,9 @@ import styled from '@emotion/styled'; import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector'; +import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth'; import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidthClassName'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { useSelectAllRows } from '@/object-record/record-table/hooks/internal/useSelectAllRows'; @@ -23,7 +25,7 @@ const StyledContainer = styled.div<{ }>` align-items: center; display: flex; - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; justify-content: center; min-width: 24px; padding-right: ${({ theme }) => theme.spacing(1)}; @@ -37,12 +39,12 @@ const StyledContainer = styled.div<{ const StyledColumnHeaderCell = styled.div` background-color: ${({ theme }) => theme.background.primary}; - min-width: 32px; + min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; box-sizing: border-box; cursor: pointer; - max-height: 32px; + max-height: ${RECORD_TABLE_ROW_HEIGHT}px; `; export const RecordTableHeaderCheckboxColumn = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx index f464baa987..2c4a5578a8 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx @@ -1,5 +1,7 @@ import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector'; +import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth'; import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidthClassName'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState'; import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState'; import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState'; @@ -16,11 +18,11 @@ const StyledDragDropHeaderCell = styled.div<{ backgroundColor: string; }>` background-color: ${({ backgroundColor }) => backgroundColor}; - min-width: 16px; - width: 16px; - max-width: 16px; - min-height: 32px; - max-height: 32px; + min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; + min-height: ${RECORD_TABLE_ROW_HEIGHT}px; + max-height: ${RECORD_TABLE_ROW_HEIGHT}px; cursor: pointer; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx index 9d3d1d1756..28f9382806 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx @@ -1,5 +1,6 @@ import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector'; import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthClassName'; +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState'; import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState'; import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState'; @@ -23,8 +24,8 @@ const StyledLastColumnHeader = styled.div<{ cursor: pointer; - height: 32px; - max-height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; + max-height: ${RECORD_TABLE_ROW_HEIGHT}px; `; export const RecordTableHeaderLastEmptyColumn = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx index 3660dab119..d59eacb2e5 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx @@ -2,10 +2,11 @@ import styled from '@emotion/styled'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth'; +import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth'; import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; +import { RecordTableDragAndDropPlaceholderCell } from '@/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell'; import { RecordTableAddButtonPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableAddButtonPlaceholderCell'; -import { RecordTableDragAndDropPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableDragAndDropPlaceholderCell'; import { RecordTableGroupSectionLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell'; import { useTheme } from '@emotion/react'; import { @@ -62,7 +63,7 @@ const StyledIconContainer = styled.div` width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; position: sticky; - left: 16px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; `; const StyledActionTextContainer = styled.div<{ width: number }>` @@ -74,7 +75,8 @@ const StyledActionTextContainer = styled.div<{ width: number }>` height: ${RECORD_TABLE_ROW_HEIGHT}px; justify-content: start; - left: 48px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; position: sticky; width: ${({ width }) => width}px; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx index e7023d9b9a..6584e5a494 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx @@ -1,6 +1,6 @@ import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox'; -import { RecordTableCellGrip } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip'; +import { RecordTableCellDragAndDrop } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop'; import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell'; import { RecordTablePlusButtonCellPlaceholder } from '@/object-record/record-table/record-table-cell/components/RecordTablePlusButtonCellPlaceholder'; import { RecordTableCells } from '@/object-record/record-table/record-table-row/components/RecordTableCells'; @@ -52,7 +52,7 @@ export const RecordTableRow = ({ )} - + @@ -75,7 +75,7 @@ export const RecordTableRow = ({ )} - + diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx index 512ab0b686..1713562514 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx @@ -17,6 +17,7 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte import { RecordTableAddButtonPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableAddButtonPlaceholderCell'; import { RecordTableGroupSectionLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell'; +import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth'; import { useAggregateRecordsForRecordTableSection } from '@/object-record/record-table/record-table-section/hooks/useAggregateRecordsForRecordTableSection'; import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState'; import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState'; @@ -54,11 +55,11 @@ const StyledChevronContainer = styled.div` display: flex; text-align: center; vertical-align: middle; - width: 32px; - min-width: 32px; + width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; + min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; position: sticky; - left: 16px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px; z-index: ${TABLE_Z_INDEX.groupSection.stickyCell}; `; @@ -76,12 +77,13 @@ const StyledRecordGroupSection = styled.div<{ width: number }>` display: flex; flex-direction: row; gap: ${({ theme }) => theme.spacing(1)}; - height: 32px; + height: ${RECORD_TABLE_ROW_HEIGHT}px; width: ${({ width }) => width}px; min-width: ${({ width }) => width}px; position: sticky; - left: 48px; + left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; z-index: ${TABLE_Z_INDEX.groupSection.stickyCell}; `; diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx index c603ecfbc2..898c2f65c1 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx @@ -1,3 +1,5 @@ +import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth'; +import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconReload, IconX } from 'twenty-ui/display'; @@ -10,7 +12,8 @@ const StyledOverridableCheckboxContainer = styled.div` align-items: center; display: inline-flex; justify-content: flex-start; - width: 48px; + width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; `; const StyledOverridableCheckboxContainerItem = styled.div` diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx index 1563b7c704..5b4ec6a72d 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx @@ -21,7 +21,7 @@ export const StyledDropdownButtonContainer = styled.div theme.spacing(1)}; - padding-left: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(1)}; padding-right: ${({ theme }) => theme.spacing(2)}; user-select: none; diff --git a/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx b/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx index 921ab47644..7ae9ddac47 100644 --- a/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx +++ b/packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx @@ -12,7 +12,7 @@ type TopBarProps = { const StyledContainer = styled.div` border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; display: flex; - margin-left: ${({ theme }) => theme.spacing(2)}; + margin-left: ${({ theme }) => theme.spacing(3)}; flex-direction: column; `; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx index 2b9ef3f6d3..329a879a23 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx @@ -54,7 +54,6 @@ const StyledBar = styled.div` min-height: 32px; padding-top: ${({ theme }) => theme.spacing(1)}; padding-bottom: ${({ theme }) => theme.spacing(1)}; - padding-left: ${({ theme }) => theme.spacing(2)}; z-index: 4; `;