Fix overflow and line break on robot status cards

equinor · Jul 30, 2024 · 59834f6 · 59834f6
1 parent 2492875
commit 59834f6
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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.",