From 59834f66fc98d3e2f41cb8b9fd01417187613ea2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Fadum?= <hf@equinor.com>
Date: Tue, 30 Jul 2024 09:22:39 +0200
Subject: [PATCH] Fix overflow and line break on robot status cards

---
 .../Displays/RobotDisplays/BatteryStatusDisplay.tsx |  2 +-
 .../RobotDisplays/PressureStatusDisplay.tsx         |  3 +--
 .../Displays/RobotDisplays/RobotStatusIcon.tsx      | 13 +++++++++++--
 .../Pages/FrontPage/RobotCards/RobotStatusCard.tsx  |  6 ++++--
 frontend/src/language/no.json                       |  2 +-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx b/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx
index 68dc7a90f..7e57b1b10 100644
--- a/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx
+++ b/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx
@@ -5,7 +5,7 @@ import { Icons } from 'utils/icons'
 
 const BatteryAlignment = styled.div`
     display: flex;
-    align-items: end;
+    align-items: center;
 `
 
 const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`
diff --git a/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx b/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx
index 909bc198b..f8ac0a7fc 100644
--- a/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx
+++ b/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx
@@ -7,9 +7,8 @@ import { PressureStatus } from 'models/Pressure'
 const PressureAlignment = styled.div`
     display: flex;
     gap: 7px;
-    align-items: end;
+    align-items: center;
 `
-
 const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`
     font-size: ${(props) => props.$fontSize};
 `
diff --git a/frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx b/frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx
index eb8323a2c..54676b088 100644
--- a/frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx
+++ b/frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx
@@ -14,12 +14,21 @@ interface StatusProps {
 const StyledStatus = styled.div`
     display: flex;
     flex-direction: row;
-    align-items: end;
+    align-items: center;
     gap: 2px;
 `
 
+const LongTypography = styled(Typography)`
+    overflow: visible;
+    white-space: normal;
+    text-overflow: unset;
+    word-break: break-word;
+    hyphens: auto;
+`
+
 const StyledIcon = styled(Icon)`
     width: 24px;
+    min-width: 24px;
     height: 24px;
 `
 
@@ -69,7 +78,7 @@ export const RobotStatusChip = ({ status, flotillaStatus, isarConnected }: Statu
     return (
         <StyledStatus>
             <StyledIcon name={statusIcon} style={{ color: iconColor }} />
-            <Typography variant="body_short">{TranslateText(status)}</Typography>
+            <LongTypography variant="body_short">{TranslateText(status)}</LongTypography>
         </StyledStatus>
     )
 }
diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
index 2a0c915d2..a50e9c228 100644
--- a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
@@ -39,13 +39,15 @@ const ButtonCard = styled.div`
     background-color: ${tokens.colors.ui.background__light.hex};
     padding: 10px;
     border-radius: 0px 0px 6px 6px;
+    height: 100%;
 `
 const HorizontalContent = styled.div`
     display: flex;
     flex-direction: row;
-    align-content: end;
-    align-items: end;
+    align-content: start;
+    align-items: start;
     justify-content: space-between;
+    gap: 4px;
     padding-top: 2px;
 `
 const VerticalContent = styled.div`
diff --git a/frontend/src/language/no.json b/frontend/src/language/no.json
index 22b6121ee..09f945d18 100644
--- a/frontend/src/language/no.json
+++ b/frontend/src/language/no.json
@@ -228,7 +228,7 @@
     "INFO": "INFO",
     "Safe Zone": "Trygg sone",
     "Safe Zone successful text": "Robotene er i sikker sone og vil ikke kjøre oppdrag. For å fortsette oppdrag trykk på knappen 'Trygt å fortsette oppdrag'.",
-    "Connection Issues": "Tilkoblingsproblemer",
+    "Connection Issues": "Tilkoblings\u00adproblemer",
     "Stop button pressed during return home warning text": "Du er i ferd med å stoppe et oppdrag som sender roboten tilbake til startposisjonen. Du må kjøre roboten manuelt til startposisjonen for å starte et nytt oppdrag.",
     "Failed Telemetry": "Mislykket telemetri",
     "Stop button pressed during localization warning text": "Du er i ferd med å stoppe et oppdrag som lokaliserer roboten. Du vil ikke kunne kjøre et inspeksjonsoppdrag før du har lokalisert roboten.",