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')}