From d964f656f99f8659e46ac6a46528f77563acdb35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Tue, 4 Jun 2024 11:44:54 +0200
Subject: [PATCH] Fix field input offset (#5726)

Fix issue introduced in https://github.com/twentyhq/twenty/pull/5426

It's not a beautiful solution. Maybe one day we should have a dedicated
component for title but it also comes with downsides (lot of code to
copy paste, such as "esc" to leave field, copy button, etc.). This one
doesn't create less debt in my opinion. Once we have the layout/widget
system we might have a dedicated widget type and the right abstraction
layers
---
 .../record-field/contexts/FieldContext.ts     |  1 +
 .../components/RecordInlineCellEditMode.tsx   | 21 +++++++++++++++----
 .../components/RecordInlineCellValue.tsx      |  4 ++--
 .../components/RecordShowContainer.tsx        |  1 +
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts b/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts
index 03be55d34c..824e7a3b5f 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts
@@ -29,6 +29,7 @@ export type GenericFieldContextType = {
   basePathToShowPage?: string;
   clearable?: boolean;
   maxWidth?: number;
+  isCentered?: boolean;
 };
 
 export const FieldContext = createContext<GenericFieldContextType>(
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
index d753e4893c..8bab022baf 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
@@ -1,8 +1,11 @@
+import { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 
-const StyledInlineCellEditModeContainer = styled.div<RecordInlineCellEditModeProps>`
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+
+const StyledInlineCellEditModeContainer = styled.div`
   align-items: center;
 
   display: flex;
@@ -29,12 +32,22 @@ type RecordInlineCellEditModeProps = {
 export const RecordInlineCellEditMode = ({
   children,
 }: RecordInlineCellEditModeProps) => {
+  const { isCentered } = useContext(FieldContext);
+
   const { refs, floatingStyles } = useFloating({
+    placement: isCentered ? undefined : 'right-start',
     middleware: [
       flip(),
-      offset({
-        mainAxis: -30,
-      }),
+      offset(
+        isCentered
+          ? {
+              mainAxis: -30,
+            }
+          : {
+              crossAxis: -4,
+              mainAxis: -4,
+            },
+      ),
     ],
     whileElementsMounted: autoUpdate,
   });
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
index 1a4de00268..a1042ddd05 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
@@ -23,11 +23,11 @@ const StyledClickableContainer = styled.div<{ readonly?: boolean }>`
 
 type RecordInlineCellValueProps = Pick<
   RecordInlineCellContainerProps,
-  | 'editModeContent'
   | 'displayModeContent'
   | 'customEditHotkeyScope'
-  | 'isDisplayModeContentEmpty'
+  | 'editModeContent'
   | 'editModeContentOnly'
+  | 'isDisplayModeContentEmpty'
   | 'isDisplayModeFixHeight'
   | 'disableHoverEffect'
   | 'readonly'
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
index 828fa028a1..61ff152d15 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -168,6 +168,7 @@ export const RecordShowContainer = ({
                   },
                   useUpdateRecord: useUpdateOneObjectRecordMutation,
                   hotkeyScope: InlineCellHotkeyScope.InlineCell,
+                  isCentered: true,
                 }}
               >
                 <RecordInlineCell readonly={isReadOnly} />