#4155 fixed first column stickiness on mobile

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

@@ -1,16 +1,20 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
 type ColumnHeadProps = {
   column: ColumnDefinition<FieldMetadata>;
+  isLabelIdentifier: boolean;
 };
 
-const StyledTitle = styled.div`
+const StyledTitle = styled.div<{ hideTitle?: boolean }>`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -19,6 +23,8 @@ const StyledTitle = styled.div`
   height: ${({ theme }) => theme.spacing(8)};
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};
+
+  ${({ hideTitle }) => hideTitle && useIsMobile() && `display: none;`}
 `;
 
 const StyledIcon = styled.div`
@@ -36,14 +42,16 @@ const StyledText = styled.span`
   white-space: nowrap;
 `;
 
-export const ColumnHead = ({ column }: ColumnHeadProps) => {
+export const ColumnHead = ({ isLabelIdentifier, column }: ColumnHeadProps) => {
   const theme = useTheme();
 
   const { getIcon } = useIcons();
   const Icon = getIcon(column.iconName);
 
+  const scrollLeft = useRecoilValue(scrollLeftState);
+
   return (
-    <StyledTitle>
+    <StyledTitle hideTitle={isLabelIdentifier && scrollLeft > 0}>
       <StyledIcon>
         <Icon size={theme.icon.size.md} />
       </StyledIcon>

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

@@ -10,6 +10,7 @@ import { RecordTableContext } from '@/object-record/record-table/contexts/Record
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { rgba } from '@/ui/theme/constants/colors';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 const StyledTable = styled.table`
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -96,6 +97,16 @@ const StyledTable = styled.table`
   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 = {

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

@@ -11,6 +11,7 @@ import { IconPlus } from '@/ui/display/icon';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 
 import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
@@ -73,6 +74,7 @@ const StyledHeaderIcon = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(1)};
   margin-right: ${({ theme }) => theme.spacing(1)};
   margin-top: ${({ theme }) => theme.spacing(1)};
+  margin-left: ${({ theme }) => theme.spacing(1.5)};
 `;
 
 export const RecordTableHeaderCell = ({
@@ -174,17 +176,19 @@ export const RecordTableHeaderCell = ({
           24,
         COLUMN_MIN_WIDTH,
       )}
+      onMouseEnter={() => setIconVisibility(true)}
+      onMouseLeave={() => setIconVisibility(false)}
     >
-      <StyledColumnHeadContainer
-        onMouseEnter={() => setIconVisibility(true)}
-        onMouseLeave={() => setIconVisibility(false)}
-      >
+      <StyledColumnHeadContainer>
         {column.isLabelIdentifier ? (
-          <ColumnHead column={column} />
+          <ColumnHead
+            isLabelIdentifier={!!column.isLabelIdentifier}
+            column={column}
+          />
         ) : (
           <ColumnHeadWithDropdown column={column} />
         )}
-        {iconVisibility && !!column.isLabelIdentifier && (
+        {(useIsMobile() || iconVisibility) && !!column.isLabelIdentifier && (
           <StyledHeaderIcon>
             <LightIconButton
               Icon={IconPlus}