Small screen text for phone, prettier and merge

frontend/src/components/Pages/InspectionPage/InspectionTable.tsx

@@ -16,6 +16,7 @@ import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { useRobotContext } from 'components/Contexts/RobotContext'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import { FrontPageSectionId } from 'models/FrontPageSectionId'
+import { SmallScreenInfoText } from 'utils/InfoText'
 
 const StyledIcon = styled(Icon)`
     display: flex;
@@ -247,16 +248,6 @@ const InspectionRow = ({ inspection, openDialog, setMissions, openScheduledDialo
     )
 }
 
-const SmallScreenInfoText = () => {
-    const { TranslateText } = useLanguageContext()
-    return (
-        <div id="SmallScreenInfoText">
-            <Icon name={Icons.Info} size={24}></Icon>
-            <Typography>{TranslateText('Small screen info text')}</Typography>
-        </div>
-    )
-}
-
 export const InspectionTable = ({ deck, inspections, scrollOnToggle, openDialog, setSelectedMissions }: IProps) => {
     const { TranslateText } = useLanguageContext()
 

frontend/src/components/Pages/MissionHistoryPage/FilterSection.tsx

@@ -29,7 +29,7 @@ const StyledButtonDiv = styled.div`
 `
 
 const StyledSearch = styled(Search)`
-    max-width: 250px;
+    max-width: 280px;
 `
 
 const StyledDialogHeader = styled.div`

frontend/src/components/Pages/MissionHistoryPage/HistoricMissionCard.tsx

@@ -1,7 +1,10 @@
 import { Table, Typography } from '@equinor/eds-core-react'
 import { config } from 'config'
 import { Mission } from 'models/Mission'
-import { MissionStatusDisplay, MissionStatusDisplayShort } from 'components/Displays/MissionDisplays/MissionStatusDisplay'
+import {
+    MissionStatusDisplay,
+    MissionStatusDisplayShort,
+} from 'components/Displays/MissionDisplays/MissionStatusDisplay'
 import { MissionRestartButton } from 'components/Displays/MissionButtons/MissionRestartButton'
 import { TaskStatus } from 'models/Task'
 import { useNavigate } from 'react-router-dom'
@@ -18,7 +21,6 @@ enum InspectionTableColumns {
     Rerun = 'RerunMission',
 }
 
-
 interface IndexedMissionProps {
     index: number
     mission: Mission
@@ -52,31 +54,30 @@ export const HistoricMissionCard = ({ index, mission }: IndexedMissionProps) =>
     )
 
     return (
-            <Table.Row key={index}>
-                <Table.Cell id={InspectionTableColumns.StatusShort}> 
-                    <MissionStatusDisplayShort status={mission.status} />
-                </Table.Cell>
-                <Table.Cell id={InspectionTableColumns.Status}>
-                    <MissionStatusDisplay status={mission.status} />
-                </Table.Cell>
-                <Table.Cell id={InspectionTableColumns.Name}>
-                    <TextAlignedButton variant="ghost" onClick={routeChange}>
-                        {mission.name}
-                    </TextAlignedButton>
-                </Table.Cell>
-                <Table.Cell id={InspectionTableColumns.Area}>
-                    <Typography>{mission.area?.areaName}</Typography>
-                </Table.Cell>
-                <Table.Cell id={InspectionTableColumns.Robot}>
-                    <Typography>{mission.robot.name}</Typography>
-                </Table.Cell>
-                <Table.Cell id={InspectionTableColumns.CompletionTime}>
-                    <MissionEndTimeDisplay mission={mission} />
-                </Table.Cell>
-                <Table.Cell id={InspectionTableColumns.Rerun}>
-                    <MissionRestartButton mission={mission} hasFailedTasks={missionHasFailedTasks} />
-                </Table.Cell>
-            </Table.Row>
-
+        <Table.Row key={index}>
+            <Table.Cell id={InspectionTableColumns.StatusShort}>
+                <MissionStatusDisplayShort status={mission.status} />
+            </Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Status}>
+                <MissionStatusDisplay status={mission.status} />
+            </Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Name}>
+                <TextAlignedButton variant="ghost" onClick={routeChange}>
+                    {mission.name}
+                </TextAlignedButton>
+            </Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Area}>
+                <Typography>{mission.area?.areaName}</Typography>
+            </Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Robot}>
+                <Typography>{mission.robot.name}</Typography>
+            </Table.Cell>
+            <Table.Cell id={InspectionTableColumns.CompletionTime}>
+                <MissionEndTimeDisplay mission={mission} />
+            </Table.Cell>
+            <Table.Cell id={InspectionTableColumns.Rerun}>
+                <MissionRestartButton mission={mission} hasFailedTasks={missionHasFailedTasks} />
+            </Table.Cell>
+        </Table.Row>
     )
 }

frontend/src/components/Pages/MissionHistoryPage/MissionHistoryView.tsx

@@ -11,6 +11,7 @@ import { useMissionFilterContext, IFilterState } from 'components/Contexts/Missi
 import { FilterSection } from './FilterSection'
 import { InspectionType } from 'models/Inspection'
 import { tokens } from '@equinor/eds-tokens'
+import { SmallScreenInfoText } from 'utils/InfoText'
 
 enum InspectionTableColumns {
     StatusShort = 'StatusShort',
@@ -23,23 +24,38 @@ enum InspectionTableColumns {
 }
 
 const HideColumnsOnSmallScreen = styled.div`
+    #SmallScreenInfoText {
+        display: none;
+    }
     @media (max-width: 730px) {
+        #SmallScreenInfoText {
+            display: grid;
+            grid-template-columns: auto auto;
+            gap: 0.3em;
+            align-items: left;
+            padding-bottom: 1rem;
+            max-width: 400px;
+        }
+    }
+    @media (max-width: 600px) {
         #${InspectionTableColumns.Status} {
             display: none;
         }
+        #${InspectionTableColumns.Area} {
+            display: none;
+        }
         #${InspectionTableColumns.Robot} {
             display: none;
         }
         #${InspectionTableColumns.CompletionTime} {
             display: none;
         }
     }
-    @media (min-width: 730px) {
+    @media (min-width: 601px) {
         #${InspectionTableColumns.StatusShort} {
             display: none;
         }
     }
-
 `
 
 const TableWithHeader = styled.div`
@@ -69,6 +85,8 @@ const ActiveFilterList = styled.div`
 
 const StyledTable = styled.div`
     display: grid;
+    overflow-x: auto;
+    overflow-y: hidden;
 `
 
 const flatten = (filters: IFilterState) => {
@@ -209,6 +227,7 @@ export const MissionHistoryView = ({ refreshInterval }: RefreshProps) => {
             {filterError && <FilterErrorDialog />}
             <StyledTable>
                 <HideColumnsOnSmallScreen>
+                    <SmallScreenInfoText />
                     <Table>
                         {isLoading && (
                             <Table.Caption captionSide={'bottom'}>
@@ -225,13 +244,19 @@ export const MissionHistoryView = ({ refreshInterval }: RefreshProps) => {
                         </Table.Caption>
                         <Table.Head sticky>
                             <Table.Row>
-                                <Table.Cell id={InspectionTableColumns.StatusShort}>{TranslateText('Status')}</Table.Cell>
+                                <Table.Cell id={InspectionTableColumns.StatusShort}>
+                                    {TranslateText('Status')}
+                                </Table.Cell>
                                 <Table.Cell id={InspectionTableColumns.Status}>{TranslateText('Status')}</Table.Cell>
                                 <Table.Cell id={InspectionTableColumns.Name}>{TranslateText('Name')}</Table.Cell>
                                 <Table.Cell id={InspectionTableColumns.Area}>{TranslateText('Area')}</Table.Cell>
                                 <Table.Cell id={InspectionTableColumns.Robot}>{TranslateText('Robot')}</Table.Cell>
-                                <Table.Cell id={InspectionTableColumns.CompletionTime}>{TranslateText('Completion Time')}</Table.Cell>
-                                <Table.Cell id={InspectionTableColumns.Rerun}>{TranslateText('Rerun mission')}</Table.Cell>
+                                <Table.Cell id={InspectionTableColumns.CompletionTime}>
+                                    {TranslateText('Completion Time')}
+                                </Table.Cell>
+                                <Table.Cell id={InspectionTableColumns.Rerun}>
+                                    {TranslateText('Rerun mission')}
+                                </Table.Cell>
                             </Table.Row>
                         </Table.Head>
                         {!isLoading && <Table.Body>{missionsDisplay}</Table.Body>}

frontend/src/utils/InfoText.tsx

@@ -0,0 +1,13 @@
+import { Typography, Icon } from '@equinor/eds-core-react'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { Icons } from 'utils/icons'
+
+export const SmallScreenInfoText = () => {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <div id="SmallScreenInfoText">
+            <Icon name={Icons.Info} size={24}></Icon>
+            <Typography>{TranslateText('Small screen info text')}</Typography>
+        </div>
+    )
+}