Merge pull request #448 from BinaryStudioAcademy/task/OV-412-timeline…

…-scroll-and-items-resize OV-412: Fix timeline scroll
BinaryStudioAcademy · Sep 27, 2024 · 96f5c10 · 96f5c10
2 parents 231d164 + 9a36cad
commit 96f5c10
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx b/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx
@@ -24,7 +24,12 @@ const TimelineView: React.FC<Properties> = ({ playerRef }) => {
     return (
         <Box
             ref={setTimelineRef}
-            style={{ ...style, overflowX: 'visible', minWidth: 'max-content' }}
+            style={{
+                ...style,
+                overflowX: 'hidden',
+                minWidth: 'max-content',
+                height: '100%',
+            }}
         >
             <TimeAxis markers={timeAxisMarkers} />
             <TimeCursor playerRef={playerRef} />

diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
@@ -58,6 +58,7 @@ import {
     selectVideoDataById,
 } from '../store/selectors.js';
 import { actions as studioActions } from '../store/studio.js';
+import styles from './styles.module.css';
 
 const Studio: React.FC = () => {
     const { state: locationState } = useLocation();
@@ -252,6 +253,8 @@ const Studio: React.FC = () => {
                 position="relative"
                 display="flex"
                 flexDirection="column"
+                overflowY={'hidden'}
+                className={styles['scrollableContainer']}
             >
                 <WarningModal
                     isOpen={isModalOpen}

diff --git a/frontend/src/bundles/studio/pages/styles.module.css b/frontend/src/bundles/studio/pages/styles.module.css
@@ -0,0 +1,27 @@
+.scrollableContainer {
+    ::-webkit-scrollbar {
+        width: 12px;
+        background-color: #f5f5f5;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        border-radius: 10px;
+        background-color: #f5f5f5;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        background-color: #f5f5f5;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+
+    scrollbar-width: thin;
+    scrollbar-color: #888 #f1f1f1;
+}