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