diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index ec54a18717..d9704585b3 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -115,7 +115,7 @@ export const RecordInlineCellContainer = () => { )} - {label && ( + {showLabel && ( @@ -134,7 +134,6 @@ export const RecordInlineCellContainer = () => { )} )} - diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx index 54ea90a104..af331be2b0 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx @@ -60,8 +60,6 @@ const StyledEmptyField = styled.div` color: ${({ theme }) => theme.font.color.light}; display: flex; height: 20px; - - background-color: ${({ theme }) => theme.background.secondary}; `; export const RecordInlineCellDisplayMode = ({ @@ -74,25 +72,24 @@ export const RecordInlineCellDisplayMode = ({ }>) => { const { t } = useLingui(); - const { editModeContentOnly, showLabel, label, buttonIcon, readonly } = + const { editModeContentOnly, label, buttonIcon, readonly } = useRecordInlineCellContext(); - const isDisplayModeContentEmpty = useIsFieldEmpty(); + const isFieldEmpty = useIsFieldEmpty(); const showEditButton = buttonIcon && isHovered && !readonly && - !isDisplayModeContentEmpty && + !isFieldEmpty && !editModeContentOnly; const isFieldInputOnly = useIsFieldInputOnly(); - const shouldDisplayEditModeOnFocus = isHovered && isFieldInputOnly; + const emptyPlaceHolder = label ?? t`Empty`; - const emptyPlaceHolder = showLabel ? t`Empty` : label; + const shouldShowValue = !isFieldEmpty || isFieldInputOnly; - const shouldShowEmptyPlaceholder = - (isDisplayModeContentEmpty && !shouldDisplayEditModeOnFocus) || !children; + const shouldShowEmptyPlaceholder = isFieldEmpty; return ( <> @@ -102,11 +99,11 @@ export const RecordInlineCellDisplayMode = ({ onClick={onClick} > - {shouldShowEmptyPlaceholder ? ( - {emptyPlaceHolder} - ) : ( + {shouldShowValue ? ( children - )} + ) : shouldShowEmptyPlaceholder ? ( + {emptyPlaceHolder} + ) : null} {showEditButton && (