From 1da4d6a82cf41e8421cb5ce408688d896fc7507b Mon Sep 17 00:00:00 2001
From: jeet1desai <jeetdesai995@gmail.com>
Date: Fri, 1 Mar 2024 12:45:18 +0530
Subject: [PATCH] fix: resolved comment in PR

---
 .../record-table/components/ColumnHead.tsx    | 14 +++++++---
 .../components/RecordTableHeaderCell.tsx      | 28 +++++++++++--------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
index e7420657a03..73fde02c49b 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
@@ -1,10 +1,10 @@
-import { useTheme } from '@emotion/react';
+import { css, 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 { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
@@ -24,7 +24,13 @@ const StyledTitle = styled.div<{ hideTitle?: boolean }>`
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};
 
-  ${({ hideTitle }) => hideTitle && useIsMobile() && `display: none;`}
+  ${({ hideTitle }) =>
+    hideTitle &&
+    css`
+      @media (max-width: ${MOBILE_VIEWPORT}px) {
+        display: none;
+      }
+    `}
 `;
 
 const StyledIcon = styled.div`
@@ -51,7 +57,7 @@ export const ColumnHead = ({ isLabelIdentifier, column }: ColumnHeadProps) => {
   const scrollLeft = useRecoilValue(scrollLeftState);
 
   return (
-    <StyledTitle hideTitle={isLabelIdentifier && scrollLeft > 0}>
+    <StyledTitle hideTitle={!!isLabelIdentifier && scrollLeft > 0}>
       <StyledIcon>
         <Icon size={theme.icon.size.md} />
       </StyledIcon>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx
index fc4b7779f0f..8c71587140b 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx
@@ -12,6 +12,7 @@ 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 { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 
 import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
@@ -71,10 +72,7 @@ const StyledColumnHeadContainer = styled.div`
 `;
 
 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)};
+  margin: ${({ theme }) => theme.spacing(1, 1, 1, 1.5)};
 `;
 
 export const RecordTableHeaderCell = ({
@@ -166,6 +164,12 @@ export const RecordTableHeaderCell = ({
     onMouseUp: handleResizeHandlerEnd,
   });
 
+  const isMobile = useIsMobile();
+  const scrollLeft = useRecoilValue(scrollLeftState);
+
+  const disableColumnResize =
+    column.isLabelIdentifier && isMobile && scrollLeft > 0;
+
   return (
     <StyledColumnHeaderCell
       key={column.fieldMetadataId}
@@ -199,13 +203,15 @@ export const RecordTableHeaderCell = ({
           </StyledHeaderIcon>
         )}
       </StyledColumnHeadContainer>
-      <StyledResizeHandler
-        className="cursor-col-resize"
-        role="separator"
-        onPointerDown={() => {
-          setResizedFieldKey(column.fieldMetadataId);
-        }}
-      />
+      {!disableColumnResize && (
+        <StyledResizeHandler
+          className="cursor-col-resize"
+          role="separator"
+          onPointerDown={() => {
+            setResizedFieldKey(column.fieldMetadataId);
+          }}
+        />
+      )}
     </StyledColumnHeaderCell>
   );
 };