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

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}

src/features/MatchPage/components/MatchDescription/styled.tsx

@@ -17,9 +17,7 @@ export const Description = styled.div<{isHidden?: boolean}>`
     : ''};
   
   ${({ isHidden }) => (isHidden && isMobileDevice ? css`
-      height: 0;
-      opacity: 0;
-      margin-bottom: 0;
+      display: none;
   ` : '')}
 `
 

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;`
+    : '')}
 `

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}>

src/features/MatchSidePlaylists/styled.tsx

@@ -11,6 +11,7 @@ import { T9n } from 'features/T9n'
 
 type WrapperProps = {
   highlighted?: boolean,
+  isHidden?: boolean,
   isTourOpen?: boolean,
 }
 
@@ -38,6 +39,11 @@ export const Wrapper = styled.div<WrapperProps>`
     `
     : ''};
   
+  ${({ isHidden }) => (isHidden && isMobileDevice
+    ? css`
+      padding-top: 50px;`
+    : '')}
+  
   ${({ isTourOpen }) => (isTourOpen
     ? css`
          overflow-y: initial;