fix: Minor bug in column scroll in mobile viewport (twentyhq#7448)

> [!Note] > - This PR fixes twentyhq#7447 --------- Co-authored-by: Charles Bochet <[email protected]>
ad-elias · Oct 5, 2024 · 967e04f · 967e04f
1 parent 4d67787
commit 967e04f
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 19 deletions.
diff --git a/packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx b/packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx
@@ -38,6 +38,6 @@ export const Default: Story = {
     await canvas.findByText('Tasks');
     await canvas.findByText('People');
     await canvas.findByText('Opportunities');
-    await canvas.findByText('My Customs');
+    await canvas.findByText('Rockets');
   },
 };
diff --git a/...eActivities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx b/...eActivities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx
@@ -36,7 +36,7 @@ const meta: Meta<typeof EventRowMainObjectUpdated> = {
       },
     } as TimelineActivity,
     mainObjectMetadataItem: generatedMockObjectMetadataItems.find(
-      (item) => item.namePlural === 'person',
+      (item) => item.nameSingular === 'person',
     ),
   },
   decorators: [

diff --git a/...twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/...twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
@@ -24,15 +24,13 @@ import {
 type RecordInlineCellProps = {
   readonly?: boolean;
   loading?: boolean;
-  isCentered?: boolean;
 };
 
 export const RecordInlineCell = ({
   readonly,
   loading,
-  isCentered,
 }: RecordInlineCellProps) => {
-  const { fieldDefinition, recordId } = useContext(FieldContext);
+  const { fieldDefinition, recordId, isCentered } = useContext(FieldContext);
   const buttonIcon = useGetButtonIcon();
 
   const isFieldInputOnly = useIsFieldInputOnly();
@@ -90,7 +88,7 @@ export const RecordInlineCell = ({
     label: fieldDefinition.label,
     labelWidth: fieldDefinition.labelWidth,
     showLabel: fieldDefinition.showLabel,
-    isCentered: isCentered,
+    isCentered,
     editModeContent: (
       <FieldInput
         recordFieldInputdId={getRecordFieldInputId(

diff --git a/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -42,6 +42,7 @@ const StyledValueContainer = styled.div`
   display: flex;
   flex-grow: 1;
   min-width: 0;
+  position: relative;
 `;
 
 const StyledLabelContainer = styled.div<{ width?: number }>`
@@ -79,7 +80,6 @@ export type RecordInlineCellContainerProps = {
   isDisplayModeFixHeight?: boolean;
   disableHoverEffect?: boolean;
   loading?: boolean;
-  isCentered?: boolean;
 };
 
 export const RecordInlineCellContainer = () => {

diff --git a/...ront/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx b/...ront/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
@@ -1,17 +1,16 @@
+import { RecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 import { useContext } from 'react';
 import { createPortal } from 'react-dom';
 
-import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-
 const StyledInlineCellEditModeContainer = styled.div`
   align-items: center;
 
   display: flex;
+  width: 100%;
+  position: absolute;
   height: 24px;
-
-  margin-left: -${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledInlineCellInput = styled.div`
@@ -34,21 +33,21 @@ type RecordInlineCellEditModeProps = {
 export const RecordInlineCellEditMode = ({
   children,
 }: RecordInlineCellEditModeProps) => {
-  const { isCentered } = useContext(FieldContext);
+  const { isCentered } = useContext(RecordInlineCellContext);
 
   const { refs, floatingStyles } = useFloating({
-    placement: isCentered ? undefined : 'right-start',
+    placement: isCentered ? 'bottom' : 'bottom-start',
     middleware: [
       flip(),
       offset(
         isCentered
           ? {
-              mainAxis: -32,
-              crossAxis: 160,
+              mainAxis: -26,
+              crossAxis: 0,
             }
           : {
+              mainAxis: -28,
               crossAxis: -4,
-              mainAxis: -4,
             },
       ),
     ],

diff --git a/...ges/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/...ges/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -202,10 +202,10 @@ export const RecordShowContainer = ({
               },
               useUpdateRecord: useUpdateOneObjectRecordMutation,
               hotkeyScope: InlineCellHotkeyScope.InlineCell,
-              isCentered: true,
+              isCentered: !isMobile,
             }}
           >
-            <RecordInlineCell readonly={isReadOnly} isCentered={true} />
+            <RecordInlineCell readonly={isReadOnly} />
           </FieldContext.Provider>
         }
         avatarType={recordIdentifier?.avatarType ?? 'rounded'}

diff --git a/...c/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx b/...c/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx
@@ -50,7 +50,7 @@ const StyledTableHead = styled.thead<{
         clip-path: inset(0px -4px 0px 0px);
       }
       @media (max-width: ${MOBILE_VIEWPORT}px) {
-        width: 35px;
+        width: 30px;
         max-width: 35px;
       }
     }