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( 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` +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, }} >