Add ellipsis to robot name on ongoing mission card

equinor · Jan 5, 2024 · 399deeb · 399deeb
1 parent fb6dd82
commit 399deeb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/frontend/src/components/Displays/MissionDisplays/MissionRobotDisplay.tsx b/frontend/src/components/Displays/MissionDisplays/MissionRobotDisplay.tsx
@@ -8,6 +8,11 @@ const StyledRobotDisplay = styled.div`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    overflow: hidden;
+`
+const EllipsisTypography = styled(Typography)`
+    overflow: hidden;
+    text-overflow: ellipsis;
 `
 
 interface MissionProps {
@@ -21,7 +26,7 @@ export const MissionRobotDisplay = ({ mission }: MissionProps) => {
             <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
                 {TranslateText('Robot')}
             </Typography>
-            <Typography>{mission.robot.name}</Typography>
+            <EllipsisTypography>{mission.robot.name}</EllipsisTypography>
         </StyledRobotDisplay>
     )
 }
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -37,7 +37,10 @@ const TopContent = styled.div`
 const BottomContent = styled.div`
     display: flex;
     justify-content: space-between;
+    gap: 12px;
+    white-space: nowrap;
 `
+
 export const OngoingMissionCard = ({ mission }: MissionProps): JSX.Element => {
     let navigate = useNavigate()
     const routeChange = () => {