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 03be55d34..824e7a3b5 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 d753e4893..8bab022ba 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 1a4de0026..a1042ddd0 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 828fa028a..61ff152d1 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} />