Fix video resizing

equinor · Oct 28, 2024 · 29ae239 · 29ae239
1 parent 5ea6039
commit 29ae239
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/frontend/src/components/Pages/MissionPage/VideoStream/FullScreenVideo.tsx b/frontend/src/components/Pages/MissionPage/VideoStream/FullScreenVideo.tsx
@@ -24,6 +24,9 @@ const FullscreenExitButtonRotate = styled(Button)`
 
 const FullScreenCard = styled.div`
     padding: 1rem;
+    box-shadow: ${tokens.elevation.raised};
+    width: 100%;
+    background-color: white;
 `
 
 interface IFullScreenVideoStreamCardProps {
@@ -37,16 +40,6 @@ export const FullScreenVideoStreamCard = ({
     videoStreamName,
     toggleFullScreenMode,
 }: IFullScreenVideoStreamCardProps) => {
-    const cardWidth = () => {
-        const availableInnerHeight = window.innerHeight - 9 * 16
-        const availableInnerWidth = window.innerWidth - 2 * 16
-        const coverageFactor = 0.9
-        const aspectRatio = 16 / 9
-        return Math.round(
-            Math.min(coverageFactor * availableInnerWidth, aspectRatio * coverageFactor * availableInnerHeight)
-        )
-    }
-
     const fullScreenExitButton = (shouldRotate270Clockwise: boolean) => {
         if (shouldRotate270Clockwise) {
             return (
@@ -64,7 +57,7 @@ export const FullScreenVideoStreamCard = ({
 
     // Rotated stream is not supported for simpleplayer
     return (
-        <FullScreenCard style={{ boxShadow: tokens.elevation.raised, width: cardWidth() }}>
+        <FullScreenCard>
             <Typography variant="h5">{videoStreamName}</Typography>
             <VideoPlayerSimpleStream videoStream={videoStream} videoStreamName={videoStreamName} />
             {fullScreenExitButton(false)}

diff --git a/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamWindow.tsx b/frontend/src/components/Pages/MissionPage/VideoStream/VideoStreamWindow.tsx
@@ -18,8 +18,12 @@ const VideoFullScreen = styled(ReactModal)`
     position: absolute;
     top: 50%;
     left: 50%;
+    width: 90%;
     transform: translate(-50%, -50%);
     padding-top: 5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 `
 
 interface VideoStreamWindowProps {

diff --git a/frontend/src/components/Pages/RobotPage/PressureTable.tsx b/frontend/src/components/Pages/RobotPage/PressureTable.tsx
@@ -15,6 +15,7 @@ const StyledTable = styled.div`
     display: grid;
     overflow-x: auto;
     overflow-y: hidden;
+    z-index: 0;
 `
 
 const StyledTableRow = styled(Table.Row)`