From 6a286d46ddf63a25157e968e7371990714af532e Mon Sep 17 00:00:00 2001
From: Margarita <margarita.polyakova@instatsport.com>
Date: Thu, 4 May 2023 12:25:20 +0400
Subject: [PATCH] feat(in-239): stats scroll bug

---
 src/features/MatchPage/components/FinishedMatch/index.tsx | 3 ++-
 src/features/MatchPage/components/LiveMatch/index.tsx     | 3 ++-
 .../MatchPage/components/MatchDescription/styled.tsx      | 6 ++----
 src/features/MatchPage/styled.tsx                         | 7 ++++++-
 src/features/MatchSidePlaylists/index.tsx                 | 2 ++
 src/features/MatchSidePlaylists/styled.tsx                | 8 +++++++-
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx
index 06af13b6..926bcc6f 100644
--- a/src/features/MatchPage/components/FinishedMatch/index.tsx
+++ b/src/features/MatchPage/components/FinishedMatch/index.tsx
@@ -18,6 +18,7 @@ export const FinishedMatch = () => {
     access,
     isOpenFiltersPopup,
     profile,
+    profileCardShown,
   } = useMatchPageStore()
   const {
     chapters,
@@ -46,7 +47,7 @@ export const FinishedMatch = () => {
         />
       </Modal>
 
-      <Container>
+      <Container isHidden={!profileCardShown}>
         {!isEmpty(chapters) && (
           <Fragment>
             <MultiSourcePlayer
diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx
index eadcea51..6b9ba090 100644
--- a/src/features/MatchPage/components/LiveMatch/index.tsx
+++ b/src/features/MatchPage/components/LiveMatch/index.tsx
@@ -15,6 +15,7 @@ import { MatchDescription } from '../MatchDescription'
 export const LiveMatch = () => {
   const {
     profile,
+    profileCardShown,
     selectedPlaylist,
   } = useMatchPageStore()
 
@@ -29,7 +30,7 @@ export const LiveMatch = () => {
   } = useLiveMatch()
   return (
     <Fragment>
-      <Container>
+      <Container isHidden={!profileCardShown}>
         {profile?.youtube_link ? (
           <YoutubePlayer
             chapters={chapters}
diff --git a/src/features/MatchPage/components/MatchDescription/styled.tsx b/src/features/MatchPage/components/MatchDescription/styled.tsx
index 1b2eaceb..3a98c269 100644
--- a/src/features/MatchPage/components/MatchDescription/styled.tsx
+++ b/src/features/MatchPage/components/MatchDescription/styled.tsx
@@ -17,10 +17,8 @@ export const Description = styled.div<{isHidden?: boolean}>`
     : ''};
   
   ${({ isHidden }) => (isHidden && isMobileDevice ? css`
-      height: 0;
-      opacity: 0;
-      margin-bottom: 0;
-    ` : '')}
+      display: none;
+  ` : '')}
 `
 
 export const DescriptionInnerBlock = styled.div`
diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx
index affa412e..0728ad41 100644
--- a/src/features/MatchPage/styled.tsx
+++ b/src/features/MatchPage/styled.tsx
@@ -35,7 +35,7 @@ export const Wrapper = styled.div<WrapperProps>`
     : '')};
 `
 
-export const Container = styled.div`
+export const Container = styled.div<{isHidden?: boolean}>`
   width: 100%;
   max-height: 896px;
   display: flex;
@@ -63,4 +63,9 @@ export const Container = styled.div`
         }
       `
     : ''};
+
+  ${({ isHidden }) => (isHidden && isMobileDevice
+    ? css`
+      margin-bottom: 0;`
+    : '')}
 `
diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx
index 3267d05e..81cb11da 100644
--- a/src/features/MatchSidePlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/index.tsx
@@ -60,6 +60,7 @@ export const MatchSidePlaylists = ({
     hideProfileCard,
     matchPlaylists: playlists,
     profile,
+    profileCardShown,
     selectedTab,
     showProfileCard,
     tournamentData,
@@ -137,6 +138,7 @@ export const MatchSidePlaylists = ({
       data-step={Steps.Welcome}
       highlighted={Boolean(isOpen) && currentStep === Steps.Welcome}
       isTourOpen={Boolean(isOpen)}
+      isHidden={!profileCardShown}
     >
       <TabsWrapper>
         <TabsGroup hasLessThanFourTabs={hasLessThanFourTabs}>
diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx
index 4f79309e..8e28ffb7 100644
--- a/src/features/MatchSidePlaylists/styled.tsx
+++ b/src/features/MatchSidePlaylists/styled.tsx
@@ -11,6 +11,7 @@ import { T9n } from 'features/T9n'
 
 type WrapperProps = {
   highlighted?: boolean,
+  isHidden?: boolean,
   isTourOpen?: boolean,
 }
 
@@ -37,7 +38,12 @@ export const Wrapper = styled.div<WrapperProps>`
       }
     `
     : ''};
-
+  
+  ${({ isHidden }) => (isHidden && isMobileDevice
+    ? css`
+      padding-top: 50px;`
+    : '')}
+  
   ${({ isTourOpen }) => (isTourOpen
     ? css`
          overflow-y: initial;
-- 
2.30.2