Implement correct scrolling in timeline

MTES-MCT · Dec 17, 2023 · b169df2 · b169df2
1 parent c442344
commit b169df2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/frontend/src/pam/mission/mission.tsx b/frontend/src/pam/mission/mission.tsx
@@ -125,7 +125,7 @@ export default function Mission() {
                             backgroundColor: THEME.color.cultured,
                             padding: '2rem',
                             flex: 1,
-                            overflowY: 'auto',
+                            overflowY: 'hidden',
                             minHeight: 'calc(100vh - 2 * 60px)',
                             maxHeight: 'calc(100vh - 2 * 60px)'
                         }}
@@ -160,11 +160,14 @@ export default function Mission() {
                                         </Stack>
                                     </FlexboxGrid.Item>
                                 </FlexboxGrid>
-                            </FlexboxGrid.Item>
-                            <FlexboxGrid.Item style={{width: '100%'}}>
                                 <Divider style={{backgroundColor: THEME.color.charcoal}}/>
                             </FlexboxGrid.Item>
-                            <FlexboxGrid.Item style={{width: '100%'}}>
+                            <FlexboxGrid.Item style={{
+                                width: '100%',
+                                overflowY: 'auto',
+                                minHeight: 'calc(100vh - 260px)',
+                                maxHeight: 'calc(100vh - 260px)'
+                            }}>
                                 <MissionTimeline missionId={missionId} onSelectAction={selectAction}/>
                             </FlexboxGrid.Item>
                         </FlexboxGrid>

diff --git a/frontend/src/pam/mission/timeline/timeline-item.tsx b/frontend/src/pam/mission/timeline/timeline-item.tsx
@@ -211,14 +211,9 @@ const ActionNavControl: React.FC<{ action: Action; onClick: any }> = ({action, o
                                 <Stack direction="row" spacing="0.5rem">
                                     <Stack.Item>
                                         <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-                                            Contrôles
-                                        </Text>
-                                    </Stack.Item>
-                                    <Stack.Item>
-                                        <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
-                                            {`${controlMethodToHumanString(actionData?.controlMethod)} - ${vesselTypeToHumanString(
-                                                actionData?.vesselType
-                                            )}`}
+                                            Contrôles <b>{`${controlMethodToHumanString(actionData?.controlMethod)} - ${vesselTypeToHumanString(
+                                            actionData?.vesselType
+                                        )}`}</b>
                                         </Text>
                                     </Stack.Item>
                                 </Stack>
@@ -280,7 +275,8 @@ const ActionStatus: React.FC<{ action: Action; onClick: any }> = ({action, onCli
                             style={{
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
-                                textOverflow: 'ellipsis'
+                                textOverflow: 'ellipsis',
+                                maxWidth: '500px'
                             }}
                         >
                             <b>{`${mapStatusToText(actionData?.status)} - ${actionData?.isStart ? 'début' : 'fin'} ${

diff --git a/frontend/src/pam/mission/timeline/timeline.tsx b/frontend/src/pam/mission/timeline/timeline.tsx
@@ -48,7 +48,7 @@ const MissionTimeline: React.FC<MissionTimelineProps> = ({missionId, onSelectAct
                                         </Stack.Item>
                                     )}
 
-                                    <Stack.Item>
+                                    <Stack.Item style={{marginRight: '1rem'}}>
                                         <Stack direction="column" spacing={'0.75rem'} style={{width: '100%'}}
                                                alignItems="stretch">
                                             {/* Render actions for the day */}