Merge pull request #197 from BinaryStudioAcademy/task/OV-194-fix-styl…

…ing-studio-page OV-194: Fix styling studio page
BinaryStudioAcademy · Sep 9, 2024 · 529b0f6 · 529b0f6
2 parents bd52f85 + 4e0260d
commit 529b0f6
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 18 deletions.
diff --git a/frontend/src/bundles/common/components/player/styles/landscape.style.ts b/frontend/src/bundles/common/components/player/styles/landscape.style.ts
@@ -2,6 +2,7 @@ const LandscapeStyle = {
     width: '40%',
     minWidth: '400px',
     objectFit: 'contain',
+    maxHeight: '100%',
 } as const;
 
 export { LandscapeStyle };
diff --git a/frontend/src/bundles/common/components/player/styles/portrait.style.ts b/frontend/src/bundles/common/components/player/styles/portrait.style.ts
@@ -2,6 +2,7 @@ const PortraitStyle = {
     width: '10%',
     minWidth: '200px',
     objectFit: 'contain',
+    maxHeight: '100%',
 } as const;
 
 export { PortraitStyle };
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu/menu.tsx
@@ -45,6 +45,7 @@ const Menu: React.FC<Properties> = ({
                 color: 'white',
                 borderTopRightRadius: 'xl',
                 borderBottomRightRadius: 'xl',
+                zIndex: 100,
             }}
         >
             <VStack spacing={1} align="stretch" p={2} w="100%">

diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
@@ -25,7 +25,6 @@ import {
     VideoMenu,
 } from '../components/components.js';
 import { actions as studioActionCreator } from '../store/studio.js';
-import styles from './styles.module.css';
 
 const initialRange: Range = {
     start: minutesToMilliseconds(0),
@@ -41,7 +40,13 @@ const Studio: React.FC = () => {
     }, [dispatch]);
 
     return (
-        <Box minHeight="100vh" height="100%" position="relative">
+        <Box
+            minHeight="100vh"
+            height="100%"
+            position="relative"
+            display="flex"
+            flexDirection="column"
+        >
             <Header
                 center={
                     <Button
@@ -61,18 +66,20 @@ const Studio: React.FC = () => {
             />
 
             <VideoMenu />
-            <VStack className={styles['timeline']} alignItems={'stretch'}>
+            <Box flex="1 1 auto">
+                <Player
+                    VideoComponent={VideoComponent}
+                    playerRef={playerReference}
+                    durationInFrames={300}
+                />
+            </Box>
+
+            <VStack alignItems={'stretch'}>
                 <PlayerControls />
                 <Box>
                     <Timeline initialRange={initialRange} />
                 </Box>
             </VStack>
-
-            <Player
-                VideoComponent={VideoComponent}
-                playerRef={playerReference}
-                durationInFrames={300}
-            />
         </Box>
     );
 };

diff --git a/frontend/src/bundles/studio/pages/styles.module.css b/frontend/src/bundles/studio/pages/styles.module.css
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
@@ -23,23 +23,23 @@ const routes = [
                 path: AppRoute.ROOT,
                 element: (
                     <ProtectedRoute>
-                        <Home />,
+                        <Home />
                     </ProtectedRoute>
                 ),
             },
             {
                 path: AppRoute.STUDIO,
                 element: (
                     <ProtectedRoute>
-                        <Studio />,
+                        <Studio />
                     </ProtectedRoute>
                 ),
             },
             {
                 path: AppRoute.MY_AVATAR,
                 element: (
                     <ProtectedRoute>
-                        <MyAvatar />,
+                        <MyAvatar />
                     </ProtectedRoute>
                 ),
             },