Fix field input offset (twentyhq#5726)

Fix issue introduced in twentyhq#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

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>(

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,
   });

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'

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} />