refactor: remove RecordTableFirstColumnScrollEffect

packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx

@@ -1,18 +1,19 @@
-import { useRef } from 'react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
 import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody';
 import { RecordTableBodyEffect } from '@/object-record/record-table/components/RecordTableBodyEffect';
-import { RecordTableFirstColumnScrollEffect } from '@/object-record/record-table/components/RecordTableFirstColumnScrollObserver';
 import { RecordTableHeader } from '@/object-record/record-table/components/RecordTableHeader';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { RGBA } from '@/ui/theme/constants/Rgba';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
 
-const StyledTable = styled.table`
+const StyledTable = styled.table<{ freezeFirstColumns?: boolean }>`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   border-spacing: 0;
   margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
@@ -68,45 +69,43 @@ const StyledTable = styled.table`
   tbody td:nth-of-type(1) {
     left: 0;
   }
+
+  // Label identifier column
   thead th:nth-of-type(2),
   tbody td:nth-of-type(2) {
     left: calc(${({ theme }) => theme.table.checkboxColumnWidth} - 2px);
-  }
 
-  tbody td:nth-of-type(2)::after,
-  thead th:nth-of-type(2)::after {
-    content: '';
-    height: calc(100% + 1px);
-    position: absolute;
-    top: 0;
-    width: 4px;
-    right: -4px;
-  }
+    ${({ freezeFirstColumns }) =>
+      freezeFirstColumns &&
+      css`
+        @media (max-width: ${MOBILE_VIEWPORT}px) {
+          width: 35px;
+          max-width: 35px;
+        }
+      `}
 
-  &.freeze-first-columns-shadow thead th:nth-of-type(2)::after,
-  &.freeze-first-columns-shadow tbody td:nth-of-type(2)::after {
-    box-shadow: ${({ theme }) =>
-      `4px 0px 4px -4px ${
-        theme.name === 'dark'
-          ? RGBA(theme.grayScale.gray50, 0.8)
-          : RGBA(theme.grayScale.gray100, 0.25)
-      } inset`};
+    &::after {
+      content: '';
+      height: calc(100% + 1px);
+      position: absolute;
+      top: 0;
+      width: 4px;
+      right: -4px;
+
+      ${({ freezeFirstColumns, theme }) =>
+        freezeFirstColumns &&
+        css`
+          box-shadow: 4px 0px 4px -4px ${theme.name === 'dark'
+              ? RGBA(theme.grayScale.gray50, 0.8)
+              : RGBA(theme.grayScale.gray100, 0.25)} inset;
+        `}
+    }
   }
 
   thead th:nth-of-type(3),
   tbody td:nth-of-type(3) {
     border-left: 1px solid ${({ theme }) => theme.border.color.light};
   }
-
-  ${() =>
-    useIsMobile() &&
-    `
-      &.freeze-first-columns-shadow thead th:nth-of-type(2),
-      &.freeze-first-columns-shadow tbody td:nth-of-type(2) {
-        width: 35px;
-        max-width: 35px;
-      }
-  `}
 `;
 
 type RecordTableProps = {
@@ -122,8 +121,8 @@ export const RecordTable = ({
   onColumnsChange,
   createRecord,
 }: RecordTableProps) => {
-  const recordTableRef = useRef<HTMLTableElement>(null);
   const { scopeId } = useRecordTableStates(recordTableId);
+  const scrollLeft = useRecoilValue(scrollLeftState);
 
   const { objectMetadataItem } = useObjectMetadataItemOnly({
     objectNameSingular,
@@ -138,11 +137,12 @@ export const RecordTable = ({
         <RecordTableContext.Provider
           value={{
             objectMetadataItem,
-            recordTableRef,
           }}
         >
-          <RecordTableFirstColumnScrollEffect />
-          <StyledTable ref={recordTableRef} className="entity-table-cell">
+          <StyledTable
+            freezeFirstColumns={scrollLeft > 0}
+            className="entity-table-cell"
+          >
             <RecordTableHeader createRecord={createRecord} />
             <RecordTableBodyEffect objectNameSingular={objectNameSingular} />
             <RecordTableBody objectNameSingular={objectNameSingular} />

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableFirstColumnScrollObserver.tsx

@@ -1,20 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
-
-import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
-import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
-
-export const RecordTableFirstColumnScrollEffect = () => {
-  const { recordTableRef } = useContext(RecordTableContext);
-
-  const scrollLeft = useRecoilValue(scrollLeftState);
-
-  useEffect(() => {
-    recordTableRef.current?.classList.toggle(
-      'freeze-first-columns-shadow',
-      scrollLeft > 0,
-    );
-  }, [scrollLeft, recordTableRef]);
-
-  return <></>;
-};

packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableContext.ts

@@ -4,7 +4,6 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 
 type RecordTableContextProps = {
   objectMetadataItem: ObjectMetadataItem;
-  recordTableRef: React.RefObject<HTMLDivElement>;
 };
 
 export const RecordTableContext = createContext<RecordTableContextProps>(