fix(mindset): improve layout responsiveness

stakwork · Dec 26, 2024 · ed422aa · ed422aa
1 parent 8c7d331
commit ed422aa
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/components/mindset/components/Sidebar/Transcript/index.tsx b/src/components/mindset/components/Sidebar/Transcript/index.tsx
@@ -87,7 +87,6 @@ const Wrapper = styled(Flex)`
   padding: 24px;
   overflow-y: auto;
   flex: 1 1 100%;
-  max-height: 60%;
 `
 
 const TranscriptWrapper = styled(Flex)`

diff --git a/src/components/mindset/components/Sidebar/index.tsx b/src/components/mindset/components/Sidebar/index.tsx
@@ -22,6 +22,8 @@ const Wrapper = styled(Flex)(({ theme }) => ({
   padding: '0 20px 0 20px',
   background: 'transparent',
   width: '100%',
+  height: 'calc(100vh - 180px)',
+  overflow: 'auto',
 
   [theme.breakpoints.up('sm')]: {
     width: MENU_WIDTH,

diff --git a/src/components/mindset/index.tsx b/src/components/mindset/index.tsx
@@ -258,8 +258,8 @@ export const MindSet = () => {
   }, [dataInitial])
 
   return (
-    <>
-      <Flex direction="row" style={{ height: '82%' }}>
+    <MainContainer>
+      <ContentWrapper direction="row">
         {selectedEpisodeId ? (
           <>
             <Flex>
@@ -277,14 +277,26 @@ export const MindSet = () => {
         ) : (
           <LandingPage />
         )}
-      </Flex>
+      </ContentWrapper>
       <PlayerControlWrapper>
         <PlayerControl markers={markers} />
       </PlayerControlWrapper>
-    </>
+    </MainContainer>
   )
 }
 
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+`
+
+const ContentWrapper = styled(Flex)`
+  flex: 1;
+  overflow: hidden;
+`
+
 const ContentContainer = styled(Flex)`
   flex-basis: 100%;
   flex-shrink: 1;