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