diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx index 1f61139d1d..690ac5c5d3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx @@ -1,3 +1,4 @@ +import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight'; import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex'; import { RecordTableHeaderCheckboxColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn'; import { RecordTableHeaderDnd } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderDnd'; @@ -10,11 +11,14 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use import { styled } from '@linaria/react'; import { themeCssVariables } from 'twenty-ui/theme-constants'; +// The header takes the first slot of the virtualized row grid, whose pitch is +// RECORD_TABLE_ROW_HEIGHT + 1 (row plus its bottom border). const StyledHeaderContainer = styled.div` background-color: ${themeCssVariables.background.primary}; box-shadow: 0 -1px 0 ${themeCssVariables.background.primary}; display: flex; flex-direction: row; + height: ${RECORD_TABLE_ROW_HEIGHT + 1}px; position: sticky; top: 0; z-index: ${TABLE_Z_INDEX.headerRow};