diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
index 5b80963f2..74abceb59 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -37,7 +37,6 @@ const StyledSmallScreenMissionCard = styled.div`
align-items: flex-start;
align-self: stretch;
padding: 8px;
- gap: 8px;
@media (min-width: 960px) {
display: none;
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx
index 4d8e8fe24..ebb46de99 100644
--- a/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx
+++ b/frontend/src/components/Pages/FrontPage/MissionOverview/RobotCard.tsx
@@ -53,9 +53,22 @@ const StyledNoneImageBody = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
- gap: 4px;
- flex: 1 0 0;
align-self: stretch;
+
+ @media (min-width: 960px) {
+ gap: 16px;
+ }
+`
+
+const StyledMainBody = styled.div`
+ align-self: stretch;
+
+ @media (min-width: 960px) {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+ }
`
const StyledHeader = styled.div`
@@ -112,54 +125,56 @@ export const RobotCard = ({ robot }: { robot: Robot }) => {
-
-
- {robot.name}
- {' ('}
- {getRobotModel(robot.model.type)}
- {')'}
-
-
-
-
-
-
-
- {TranslateText('Status')}
-
-
-
- {robot.status !== RobotStatus.Offline ? (
- <>
-
- {TranslateText('Battery')}
-
-
-
- {robot.pressureLevel !== undefined && robot.pressureLevel !== null && (
+
+
+
+ {robot.name}
+ {' ('}
+ {getRobotModel(robot.model.type)}
+ {')'}
+
+
+
+
+
+
+
+ {TranslateText('Status')}
+
+
+
+ {robot.status !== RobotStatus.Offline ? (
+ <>
- {TranslateText('Pressure')}
- {TranslateText('Battery')}
+
- )}
- >
- ) : (
- <>>
- )}
-
+
+ {robot.pressureLevel !== undefined && robot.pressureLevel !== null && (
+
+ {TranslateText('Pressure')}
+
+
+ )}
+ >
+ ) : (
+ <>>
+ )}
+
+
{TranslateText('Open robot information')}