[Missions] Agrandissement du formulaire de contrôle (#2336)

## Linked issues Avant ![Screenshot from 2023-07-14 13-36-05](https://github.com/MTES-MCT/monitorfish/assets/14853556/eacd807c-b64d-40df-9da7-c993cddb7ee1) Après ![Screenshot from 2023-07-14 13-49-42](https://github.com/MTES-MCT/monitorfish/assets/14853556/9e3f5a66-6d87-43a3-87ae-6806104968cd) Passe de 537px à 601px : gagne 64px. ---- - [ ] Tests E2E (Cypress)
MTES-MCT · Jul 17, 2023 · b8ce227 · b8ce227
2 parents 25990fc + e1cf2ac
commit b8ce227
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/frontend/src/features/SideWindow/MissionForm/ActionForm/index.tsx b/frontend/src/features/SideWindow/MissionForm/ActionForm/index.tsx
@@ -59,7 +59,6 @@ const Wrapper = styled.div`
   background-color: ${p => p.theme.color.gainsboro};
   display: flex;
   flex-direction: column;
-  max-width: 33.33%;
-  min-width: 33.33%;
+  min-width: 41.33%;
   overflow-y: auto;
 `
diff --git a/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx b/frontend/src/features/SideWindow/MissionForm/ActionList/Item.tsx
@@ -102,7 +102,9 @@ export function Item({ initialValues, isSelected, onDuplicate, onRemove, onSelec
       <Wrapper>
         {startDateAsDayjs && (
           <DateLabel>
-            <b>{formatDateLabel(startDateAsDayjs.format('DD MMM'))}</b> à {startDateAsDayjs.format('HH:mm')} (UTC)
+            <b>{formatDateLabel(startDateAsDayjs.format('DD MMM'))}</b> à {startDateAsDayjs.format('HH:mm')}
+            <br />
+            (UTC)
           </DateLabel>
         )}
 
@@ -163,9 +165,8 @@ const Wrapper = styled.div`
 const DateLabel = styled.div`
   display: flex;
   flex-direction: column;
-  min-width: 120px;
+  min-width: 70px;
   padding: 4px 24px 4px 0;
-  text-align: center;
 `
 
 const InnerWrapper = styled.div<{
@@ -195,8 +196,10 @@ const ActionLabel = styled.div`
   }
 
   > p {
+    margin-top: 0px;
     color: ${p => p.theme.color.gunMetal};
     padding: 1px 8px 0 0;
+    height: 22px;
   }
 `
 
@@ -216,5 +219,5 @@ const StyledTagGroup = styled(TagGroup)`
 `
 
 const StyledFieldError = styled(FieldError)`
-  padding-left: 120px;
+  padding-left: 70px;
 `
diff --git a/frontend/src/features/SideWindow/MissionForm/ActionList/index.tsx b/frontend/src/features/SideWindow/MissionForm/ActionList/index.tsx
@@ -90,8 +90,8 @@ const Wrapper = styled.div`
   background-color: ${p => p.theme.color.cultured};
   display: flex;
   flex-direction: column;
-  max-width: 33.33%;
-  min-width: 33.33%;
+  max-width: 465px;
+  width: 29.34%;
   overflow-y: auto;
 `
 

diff --git a/frontend/src/features/SideWindow/MissionForm/MainForm/index.tsx b/frontend/src/features/SideWindow/MissionForm/MainForm/index.tsx
@@ -103,8 +103,8 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  max-width: 33.34%;
-  min-width: 33.34%;
+  max-width: 465px;
+  width: 29.34%;
   overflow-y: auto;
 
   /* TODO Handle that in @mtes-mct/monitor-ui. */