From 399deeb52845ffb068c215141eeb478544cb323f Mon Sep 17 00:00:00 2001
From: Eddasol <esole@equinor.com>
Date: Fri, 5 Jan 2024 13:00:28 +0100
Subject: [PATCH] Add ellipsis to robot name on ongoing mission card

---
 .../Displays/MissionDisplays/MissionRobotDisplay.tsx       | 7 ++++++-
 .../Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Displays/MissionDisplays/MissionRobotDisplay.tsx b/frontend/src/components/Displays/MissionDisplays/MissionRobotDisplay.tsx
index 0f686fe82..073e35fb2 100644
--- 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
index cca921d89..cd23c59cb 100644
--- 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 = () => {