Improve iphone view for RobotArmMovement

frontend/src/components/Displays/MissionButtons/CreateEchoMissionButton.tsx

@@ -1,18 +1,16 @@
-import { Button, Icon } from '@equinor/eds-core-react'
+import { Icon } from '@equinor/eds-core-react'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
 import { useRef } from 'react'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
 import styled from 'styled-components'
-import { tokens } from '@equinor/eds-tokens'
+import { StyledButton } from 'components/Styles/StyledComponents'
 
-const StyledButton = styled(Button)`
+const StyledCreateMissionButton = styled(StyledButton)`
     display: flex;
     align-items: center;
     gap: 8px;
     border-radius: 4px;
-    height: auto;
-    min-height: ${tokens.shape.button.minHeight};
 `
 
 export const CreateEchoMissionButton = (): JSX.Element => {
@@ -22,7 +20,7 @@ export const CreateEchoMissionButton = (): JSX.Element => {
     const echoURL = 'https://echo.equinor.com/missionplanner?instCode='
 
     return (
-        <StyledButton
+        <StyledCreateMissionButton
             variant="outlined"
             onClick={() => {
                 window.open(echoURL + installationCode)
@@ -32,6 +30,6 @@ export const CreateEchoMissionButton = (): JSX.Element => {
         >
             <Icon name={Icons.ExternalLink} size={16}></Icon>
             {TranslateText('Create new Echo mission')}
-        </StyledButton>
+        </StyledCreateMissionButton>
     )
 }

frontend/src/components/Displays/RobotDisplays/RobotImage.tsx

@@ -14,7 +14,9 @@ interface TypeProps {
 }
 
 const StyledImage = styled.img<{ $height?: string }>`
-    height: ${(props) => props.$height};
+    object-fit: contain;
+    max-height: ${(props) => props.$height};
+    max-width: 100%;
 `
 
 const StyledIcon = styled(Icon)`

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

@@ -1,4 +1,4 @@
-import { Button, Icon, Tabs } from '@equinor/eds-core-react'
+import { Icon, Tabs } from '@equinor/eds-core-react'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { InspectionSection } from './InspectionSection'
 import { useEffect, useRef, useState } from 'react'
@@ -15,7 +15,7 @@ import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { EchoMissionDefinition } from 'models/MissionDefinition'
 import { FailedRequestAlertContent } from 'components/Alerts/FailedRequestAlert'
 import { Icons } from 'utils/icons'
-import { tokens } from '@equinor/eds-tokens'
+import { StyledButton } from 'components/Styles/StyledComponents'
 
 const StyledContent = styled.div`
     display: flex;
@@ -35,11 +35,6 @@ const StyledView = styled.div`
     align-items: flex-start;
 `
 
-const StyledButton = styled(Button)`
-    height: auto;
-    min-height: ${tokens.shape.button.minHeight};
-`
-
 export const InspectionOverviewSection = () => {
     const { TranslateText } = useLanguageContext()
     const { installationCode } = useInstallationContext()

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

@@ -1,4 +1,4 @@
-import { Autocomplete, Button, Dialog, Typography, Popover, Icon } from '@equinor/eds-core-react'
+import { Autocomplete, Dialog, Typography, Popover, Icon } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useRef, useState, useEffect } from 'react'
@@ -8,12 +8,11 @@ import { CondensedMissionDefinition } from 'models/MissionDefinition'
 import { BackendAPICaller } from 'api/ApiCaller'
 import { Icons } from 'utils/icons'
 import { useRobotContext } from 'components/Contexts/RobotContext'
-import { StyledAutoComplete, StyledDialog } from 'components/Styles/StyledComponents'
+import { StyledAutoComplete, StyledButton, StyledDialog } from 'components/Styles/StyledComponents'
 import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { FailedRequestAlertContent } from 'components/Alerts/FailedRequestAlert'
 import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { ScheduleMissionWithLocalizationVerificationDialog } from 'components/Displays/LocalizationVerification/ScheduleMissionWithLocalizationVerification'
-import { tokens } from '@equinor/eds-tokens'
 
 interface IProps {
     missions: CondensedMissionDefinition[]
@@ -50,12 +49,6 @@ const StyledDangerContent = styled.div`
     gap: 2px;
 `
 
-const StyledButton = styled(Button)`
-    display: inline-block;
-    height: auto;
-    min-height: ${tokens.shape.button.minHeight};
-`
-
 export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
     const { TranslateText } = useLanguageContext()
     const { enabledRobots } = useRobotContext()

frontend/src/components/Pages/RobotPage/RobotArmMovement.tsx

@@ -5,19 +5,22 @@ import { Robot } from 'models/Robot'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { tokens } from '@equinor/eds-tokens'
 import styled from 'styled-components'
+import { StyledButton, StyledDialog } from 'components/Styles/StyledComponents'
 
 interface RobotProps {
     robot: Robot
     armPosition: string
     isRobotAvailable: boolean
 }
-const feedbackTimer = 10000 // Clear feedback after 10 seconds
 
-const StyledButton = styled.div`
+const StyledCloseButton = styled.div`
     display: flex;
     justify-content: end;
     margin-top: 8px;
 `
+const LimitWidthStyle = styled.div`
+    max-width: calc(80vw);
+`
 
 export const MoveRobotArm = ({ robot, armPosition, isRobotAvailable }: RobotProps) => {
     const { TranslateText } = useLanguageContext()
@@ -49,12 +52,7 @@ export const MoveRobotArm = ({ robot, armPosition, isRobotAvailable }: RobotProp
     const onClickMoveArm = () => {
         BackendAPICaller.setArmPosition(robot.id, armPosition)
             .then(() => {
-                setUsable(false)
                 setFeedback(() => TranslateText('Moving arm to ') + TranslateText(armPosition))
-                setTimeout(() => {
-                    setFeedback('')
-                    setUsable(true)
-                }, feedbackTimer)
             })
             .catch((error) => {
                 setFeedback(
@@ -64,29 +62,33 @@ export const MoveRobotArm = ({ robot, armPosition, isRobotAvailable }: RobotProp
                         TranslateText(' Error message: ') +
                         error.message
                 )
-                setTimeout(() => {
-                    setFeedback('')
-                }, feedbackTimer)
             })
     }
     return (
         <>
             <Popover anchorEl={anchorRef.current} onClose={closePopover} open={isPopoverOpen} placement="top">
                 <Popover.Content>
-                    <Typography variant="body_short">
-                        {TranslateText(
-                            'This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.'
-                        )}
-                    </Typography>
-                    <StyledButton>
-                        <Button onClick={closePopover}>{TranslateText('Close')}</Button>
-                    </StyledButton>
+                    <LimitWidthStyle>
+                        <Typography variant="body_short">
+                            {TranslateText(
+                                'This button is disabled because the robot is not available. Check that the robot is on, and are not doing any other activities.'
+                            )}
+                        </Typography>
+                        <StyledCloseButton>
+                            <Button onClick={closePopover}>{TranslateText('Close')}</Button>
+                        </StyledCloseButton>
+                    </LimitWidthStyle>
                 </Popover.Content>
             </Popover>
-            <Button style={moveArmButtonStyle()} onClick={!usable ? openPopover : onClickMoveArm} ref={anchorRef}>
+            <StyledButton style={moveArmButtonStyle()} onClick={!usable ? openPopover : onClickMoveArm} ref={anchorRef}>
                 {TranslateText('Set robot arm to ') + '"' + TranslateText(armPosition) + '"'}
-            </Button>
-            {feedback && <p>{feedback}</p>}
+            </StyledButton>
+            <StyledDialog open={feedback !== ''}>
+                {feedback}
+                <StyledCloseButton>
+                    <Button onClick={() => setFeedback('')}>{TranslateText('Close')}</Button>
+                </StyledCloseButton>
+            </StyledDialog>
         </>
     )
 }

frontend/src/components/Pages/RobotPage/RobotPage.tsx

@@ -31,6 +31,7 @@ const RobotInfo = styled.div`
     display: flex;
     align-items: start;
     gap: 1rem;
+    width: calc(80vw);
 `
 const VerticalContent = styled.div<{ $alignItems?: string }>`
     display: flex;

frontend/src/components/Styles/StyledComponents.tsx

@@ -1,4 +1,5 @@
-import { Dialog } from '@equinor/eds-core-react'
+import { Button, Dialog } from '@equinor/eds-core-react'
+import { tokens } from '@equinor/eds-tokens'
 import styled from 'styled-components'
 
 export const StyledDialog = styled(Dialog)`
@@ -16,3 +17,8 @@ export const StyledAutoComplete = styled.div`
     gap: 25px;
     box-shadow: none;
 `
+
+export const StyledButton = styled(Button)`
+    height: auto;
+    min-height: ${tokens.shape.button.minHeight};
+`