diff --git a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
index ba6295c58..149ab35ba 100644
--- a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
+++ b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
@@ -16,17 +16,11 @@ const StyledEditableFieldNormalModeOuterContainer = styled.div<
height: ${({ isDisplayModeFixHeight }) =>
isDisplayModeFixHeight ? '16px' : 'auto'};
min-height: 16px;
-
overflow: hidden;
-
padding: ${({ theme }) => theme.spacing(1)};
${(props) => {
- if (props.isDisplayModeContentEmpty) {
- return css`
- min-width: 50px;
- `;
- } else {
+ if (!props.isDisplayModeContentEmpty) {
return css`
width: fit-content;
`;
@@ -65,6 +59,10 @@ const StyledEditableFieldNormalModeInnerContainer = styled.div`
white-space: nowrap;
`;
+const StyledEmptyField = styled.div`
+ color: ${({ theme }) => theme.font.color.light};
+`;
+
type OwnProps = {
disableClick?: boolean;
onClick?: () => void;
@@ -73,6 +71,16 @@ type OwnProps = {
isDisplayModeFixHeight?: boolean;
};
+function displayEmptyIfNothingToShow(
+ children: React.ReactNode,
+ isDisplayModeContentEmpty?: boolean,
+): React.ReactNode {
+ if (isDisplayModeContentEmpty || !children) {
+ return {'Empty'};
+ }
+ return children;
+}
+
export function EditableFieldDisplayMode({
children,
disableClick,
@@ -90,7 +98,7 @@ export function EditableFieldDisplayMode({
isDisplayModeFixHeight={isDisplayModeFixHeight}
>
- {children}
+ {displayEmptyIfNothingToShow(children, isDisplayModeContentEmpty)}
);