From 76246ec8801f38107ab6ef86ac5072ce3e3b5283 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Wed, 23 Aug 2023 15:38:37 +0200
Subject: [PATCH] Fix confirmation modal size (#1295)

---
 .../components/EditableFieldDisplayMode.tsx      | 16 +++++-----------
 .../ui/modal/components/ConfirmationModal.tsx    |  1 +
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
index 149ab35ba..cafc1338c 100644
--- a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
+++ b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
@@ -71,16 +71,6 @@ type OwnProps = {
   isDisplayModeFixHeight?: boolean;
 };
 
-function displayEmptyIfNothingToShow(
-  children: React.ReactNode,
-  isDisplayModeContentEmpty?: boolean,
-): React.ReactNode {
-  if (isDisplayModeContentEmpty || !children) {
-    return <StyledEmptyField>{'Empty'}</StyledEmptyField>;
-  }
-  return children;
-}
-
 export function EditableFieldDisplayMode({
   children,
   disableClick,
@@ -98,7 +88,11 @@ export function EditableFieldDisplayMode({
       isDisplayModeFixHeight={isDisplayModeFixHeight}
     >
       <StyledEditableFieldNormalModeInnerContainer>
-        {displayEmptyIfNothingToShow(children, isDisplayModeContentEmpty)}
+        {isDisplayModeContentEmpty || !children ? (
+          <StyledEmptyField>{'Empty'}</StyledEmptyField>
+        ) : (
+          children
+        )}
       </StyledEditableFieldNormalModeInnerContainer>
     </StyledEditableFieldNormalModeOuterContainer>
   );
diff --git a/front/src/modules/ui/modal/components/ConfirmationModal.tsx b/front/src/modules/ui/modal/components/ConfirmationModal.tsx
index e4f958715..39d68db70 100644
--- a/front/src/modules/ui/modal/components/ConfirmationModal.tsx
+++ b/front/src/modules/ui/modal/components/ConfirmationModal.tsx
@@ -26,6 +26,7 @@ export type ConfirmationModalProps = {
 
 const StyledConfirmationModal = styled(Modal)`
   padding: ${({ theme }) => theme.spacing(4)};
+  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
 `;
 
 const StyledCenteredButton = styled(Button)`