[Mission] Correction de l'affichage de la bannière et de la note libre (

#3192)

## Linked issues

- Resolve #3038
- Resolve #3023 

----

- [ ] Tests E2E (Cypress)

frontend/cypress/e2e/side_window/mission_form/action_list.spec.ts

@@ -177,7 +177,6 @@ context('Side Window > Mission Form > Action List', () => {
     cy.get('[data-cy="mission-form-action-list"] > div').children().eq(4).contains('Action CACEM')
 
     cy.get('[data-cy="mission-form-action-list"] > div').children().eq(5).contains('03 Nov à 13:59')
-    cy.get('[data-cy="mission-form-action-list"] > div').children().eq(5).contains('Note')
     cy.get('[data-cy="mission-form-action-list"] > div').children().eq(5).contains('Une note avec des informations')
     cy.get('[data-cy="mission-form-action-list"] > div').children().eq(6).contains('Action CACEM')
   })

frontend/src/features/Mission/components/MissionForm/ActionList/EnvActionCard.tsx

@@ -3,7 +3,7 @@ import { Icon, THEME } from '@mtes-mct/monitor-ui'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
-import { ActionLabel, Head } from './styles'
+import { ActionLabel, Head, NoteContent } from './styles'
 import { getActionTitle } from './utils'
 
 type EnvActionCardProps = Readonly<{
@@ -23,14 +23,7 @@ export function EnvActionCard({ missionAction }: EnvActionCardProps) {
         ]
 
       case EnvMissionAction.MissionActionType.NOTE:
-        return [
-          getActionTitle(
-            EnvMissionAction.MISSION_ACTION_TYPE_LABEL[EnvMissionAction.MissionActionType.NOTE],
-            missionAction.observations,
-            ''
-          ),
-          Icon.Note
-        ]
+        return [<NoteContent>{missionAction.observations}</NoteContent>, Icon.Note]
 
       case EnvMissionAction.MissionActionType.SURVEILLANCE:
         return [

frontend/src/features/Mission/components/MissionForm/ActionList/FishActionCard.tsx

@@ -6,7 +6,7 @@ import { find } from 'lodash'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
-import { ActionLabel, Head } from './styles'
+import { ActionLabel, Head, NoteContent } from './styles'
 import { getActionTitle, getMissionActionInfractionsFromMissionActionFormValues } from './utils'
 import { useGetNatinfsAsOptions } from '../hooks/useGetNatinfsAsOptions'
 
@@ -48,7 +48,7 @@ export function FishActionCard({ missionAction, onRemove }: FishActionCardProps)
         return [getActionTitle('Contrôle à la débarque', vesselName, 'Navire inconnu'), Icon.Anchor]
 
       case MissionAction.MissionActionType.OBSERVATION:
-        return [getActionTitle('', missionAction.otherComments, 'Note libre à renseigner'), Icon.Note]
+        return [<NoteContent>{missionAction.otherComments ?? 'Note libre à renseigner'}</NoteContent>, Icon.Note]
 
       case MissionAction.MissionActionType.SEA_CONTROL:
         return [getActionTitle('Contrôle en mer', vesselName, 'Navire inconnu'), Icon.FleetSegment]

frontend/src/features/Mission/components/MissionForm/ActionList/styles.ts

@@ -25,3 +25,13 @@ export const Head = styled.div`
     padding: 0;
   }
 `
+
+export const NoteContent = styled.div`
+  color: ${p => p.theme.color.gunMetal};
+  font: normal normal normal 14px/20px Marianne;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  flex: 1;
+`

frontend/src/features/Mission/components/MissionForm/index.tsx

@@ -371,6 +371,7 @@ export function MissionForm() {
       <Wrapper>
         {isMissionCreatedBannerDisplayed && (
           <StyledBanner
+            closingDelay={10000}
             isClosable
             isCollapsible={false}
             isHiddenByDefault={false}
@@ -509,6 +510,8 @@ export function MissionForm() {
 
 const StyledBanner = styled(Banner)`
   left: unset;
+  width: calc(100% - 122px);
+  min-width: calc(100% - 122px);
 `
 
 const MissionCreatedText = styled.div`