diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableFirstColumnScrollObserver.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableFirstColumnScrollObserver.tsx index 5554eef94..6c64644bf 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableFirstColumnScrollObserver.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableFirstColumnScrollObserver.tsx @@ -1,22 +1,20 @@ -import { useContext } from 'react'; -import { useInView } from 'react-intersection-observer'; +import { useContext, useEffect } from 'react'; +import { useRecoilValue } from 'recoil'; import { RecordTableRefContext } from '@/object-record/record-table/contexts/RecordTableRefContext'; -import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper'; +import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState'; -export const RecordTableFirstColumnScrollObserver = () => { - const scrollWrapperRef = useContext(ScrollWrapperContext); +export const RecordTableFirstColumnScrollEffect = () => { const recordTableRef = useContext(RecordTableRefContext); - const { ref: elementRef } = useInView({ - root: scrollWrapperRef.current, - onChange: (inView) => { - recordTableRef.current?.classList.toggle( - 'freeze-first-columns-shadow', - !inView, - ); - }, - }); + const scrollLeft = useRecoilValue(scrollLeftState); - return
; + useEffect(() => { + recordTableRef.current?.classList.toggle( + 'freeze-first-columns-shadow', + scrollLeft > 0, + ); + }, [scrollLeft, recordTableRef]); + + return <>>; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx index f3bccc8d0..4b45219b7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx @@ -6,7 +6,7 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; import { RecordTable } from '@/object-record/record-table/components/RecordTable'; -import { RecordTableFirstColumnScrollObserver } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver'; +import { RecordTableFirstColumnScrollEffect } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver'; import { RecordTableRefContextWrapper } from '@/object-record/record-table/components/RecordTableRefContext'; import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; @@ -113,7 +113,7 @@ export const RecordTableWithWrappers = ({