Fix white front page

mrica-equinor · Dec 5, 2024 · acb193d · acb193d
1 parent c9399b3
commit acb193d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 39 deletions.
diff --git a/frontend/src/components/Pages/FrontPage/FrontPage.tsx b/frontend/src/components/Pages/FrontPage/FrontPage.tsx
@@ -6,8 +6,8 @@ import { tokens } from '@equinor/eds-tokens'
 import { MissionControlSection } from './MissionOverview/MissionControlSection'
 
 const StyledFrontPage = styled.div`
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+    display: flex;
+    flex-direction: column;
     gap: 3rem;
     padding: 15px 15px;
     background-color: ${tokens.colors.ui.background__light.hex};

diff --git a/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx b/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
@@ -28,18 +28,15 @@ const TitleSection = styled.div`
 const InfoSection = styled.div`
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
-    width: fit-content;
-`
-const StyledCard = styled.div`
-    display: flex;
-    flex: 1 0 0;
-    padding: 8px 16px;
-    flex-direction: row;
-    align-items: end;
     gap: 32px;
-    height: 30px;
     width: fit-content;
+    @media (max-width: 600px) {
+        display: grid;
+        grid-template-columns: repeat(3, calc(75vw / 3));
+        gap: 32px;
+        width: fit-content;
+        align-items: end;
+    }
 `
 const StyledTitleText = styled.div`
     display: grid;
@@ -203,33 +200,25 @@ export const MissionHeader = ({ mission }: { mission: Mission }) => {
             </HeaderSection>
             <StyledMissionHeader>
                 <InfoSection>
-                    <StyledCard>
-                        <div>
-                            {HeaderText(translatedStatus, '')}
-                            <MissionStatusDisplay status={mission.status} />
-                        </div>
-                        {HeaderText(translatedArea, `${mission.area?.areaName}`)}
-                        {HeaderText(translatedTasks, `${numberOfCompletedTasks + '/' + mission.tasks.length}`)}
-                    </StyledCard>
-                    <StyledCard>
-                        {HeaderText(translatedStartDate, `${startDate}`)}
-                        {HeaderText(translatedStartTime, `${startTime}`)}
-                    </StyledCard>
-                    <StyledCard>
-                        {HeaderText(translatedUsedTime, `${usedTime}`)}
-                        {!isMissionCompleted && HeaderText(translatedEstimatedTimeRemaining, `${remainingTime}`)}
-                    </StyledCard>
-                    <StyledCard>
-                        {HeaderText(translatedRobot, `${mission.robot.name}`)}
-                        {!isMissionCompleted && HeaderText(translatedBatteryLevel, batteryValue)}
-                        {!isMissionCompleted &&
-                            mission.robot.pressureLevel !== undefined &&
-                            mission.robot.pressureLevel !== null &&
-                            HeaderText(
-                                translatedPressureLevel,
-                                `${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
-                            )}
-                    </StyledCard>
+                    <div>
+                        {HeaderText(translatedStatus, '')}
+                        <MissionStatusDisplay status={mission.status} />
+                    </div>
+                    {HeaderText(translatedArea, `${mission.area?.areaName}`)}
+                    {HeaderText(translatedTasks, `${numberOfCompletedTasks + '/' + mission.tasks.length}`)}
+                    {HeaderText(translatedStartDate, `${startDate}`)}
+                    {HeaderText(translatedStartTime, `${startTime}`)}
+                    {HeaderText(translatedUsedTime, `${usedTime}`)}
+                    {!isMissionCompleted && HeaderText(translatedEstimatedTimeRemaining, `${remainingTime}`)}
+                    {HeaderText(translatedRobot, `${mission.robot.name}`)}
+                    {!isMissionCompleted && HeaderText(translatedBatteryLevel, batteryValue)}
+                    {!isMissionCompleted &&
+                        mission.robot.pressureLevel !== undefined &&
+                        mission.robot.pressureLevel !== null &&
+                        HeaderText(
+                            translatedPressureLevel,
+                            `${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
+                        )}
                 </InfoSection>
             </StyledMissionHeader>
         </>