From 421066c4b83c3cf62b8b1841b0d1ad2c821d7557 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= <jeremy.magrin@gmail.com>
Date: Tue, 5 Sep 2023 09:50:23 +0200
Subject: [PATCH] fix: Boolean editable field not align properly (#1444)

---
 .../GenericEditableBooleanFieldDisplayMode.tsx    | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/front/src/modules/ui/editable-field/components/GenericEditableBooleanFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/GenericEditableBooleanFieldDisplayMode.tsx
index 605e34a71..7c0bbf7a3 100644
--- a/front/src/modules/ui/editable-field/components/GenericEditableBooleanFieldDisplayMode.tsx
+++ b/front/src/modules/ui/editable-field/components/GenericEditableBooleanFieldDisplayMode.tsx
@@ -13,10 +13,11 @@ import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldBooleanMetadata } from '../types/FieldMetadata';
 
 const StyledEditableBooleanFieldContainer = styled.div`
+  align-items: center;
   cursor: pointer;
   display: flex;
 `;
-const StyledBooleanFieldIcon = styled.div``;
+
 const StyledEditableBooleanFieldValue = styled.div`
   margin-left: ${({ theme }) => theme.spacing(1)};
 `;
@@ -54,13 +55,11 @@ export function GenericEditableBooleanFieldDisplayMode() {
 
   return (
     <StyledEditableBooleanFieldContainer onClick={toggleValue}>
-      <StyledBooleanFieldIcon>
-        {fieldValue ? (
-          <IconCheck size={theme.icon.size.sm} />
-        ) : (
-          <IconX size={theme.icon.size.sm} />
-        )}
-      </StyledBooleanFieldIcon>
+      {fieldValue ? (
+        <IconCheck size={theme.icon.size.sm} />
+      ) : (
+        <IconX size={theme.icon.size.sm} />
+      )}
       <StyledEditableBooleanFieldValue>
         {fieldValue ? 'True' : 'False'}
       </StyledEditableBooleanFieldValue>