Adapt robotImage to small screen

equinor · Jan 19, 2024 · 6cc15ef · 6cc15ef
1 parent a383673
commit 6cc15ef
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/frontend/src/components/Displays/RobotDisplays/RobotImage.tsx b/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)`

diff --git a/frontend/src/components/Pages/RobotPage/RobotPage.tsx b/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;