From ed422aaeea4b2836e9b0e24f215a3d5b0627bbb3 Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Thu, 26 Dec 2024 22:45:07 +0500
Subject: [PATCH] fix(mindset): improve layout responsiveness

---
 .../components/Sidebar/Transcript/index.tsx   |  1 -
 .../mindset/components/Sidebar/index.tsx      |  2 ++
 src/components/mindset/index.tsx              | 20 +++++++++++++++----
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/mindset/components/Sidebar/Transcript/index.tsx b/src/components/mindset/components/Sidebar/Transcript/index.tsx
index 1fa5de507..16b43612e 100644
--- 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
index 49de79c4b..93375bd86 100644
--- 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
index f82f05831..bf509c541 100644
--- 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;