diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index 02d206f1e..24b03a7b7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -1,6 +1,5 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { useRecoilValue } from 'recoil'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody'; @@ -23,12 +22,9 @@ import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocus import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition'; import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { RGBA } from '@/ui/theme/constants/Rgba'; -import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState'; -import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState'; const StyledTable = styled.table<{ freezeFirstColumns?: boolean; - freezeHeaders?: boolean; }>` border-radius: ${({ theme }) => theme.border.radius.sm}; border-spacing: 0; @@ -150,8 +146,6 @@ export const RecordTable = ({ createRecord, }: RecordTableProps) => { const { scopeId } = useRecordTableStates(recordTableId); - const scrollLeft = useRecoilValue(scrollLeftState); - const scrollTop = useRecoilValue(scrollTopState); const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular, @@ -228,11 +222,7 @@ export const RecordTable = ({ onCellMouseEnter: handleContainerMouseEnter, }} > - 0} - freezeHeaders={scrollTop > 0} - className="entity-table-cell" - > + diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx index 20e27736a..368fad940 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx @@ -33,7 +33,9 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => { const scrollWrapperRef = useContext(ScrollWrapperContext); const { ref: elementRef, inView } = useInView({ - root: scrollWrapperRef.current, + root: scrollWrapperRef.current?.querySelector( + '[data-overlayscrollbars-viewport="scrollbarHidden"]', + ), rootMargin: '1000px', }); @@ -58,21 +60,21 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => { - {visibleTableColumns.map((column, columnIndex) => - inView ? ( - - - - ) : ( - - ), - )} + {inView + ? visibleTableColumns.map((column, columnIndex) => ( + + + + )) + : visibleTableColumns.map((column, columnIndex) => ( + + ))}