fix(#ott2590): added match description panel autoscroll after playerloaded fixed video tab scroll

src/features/MatchPage/components/FinishedMatch/index.tsx

@@ -14,6 +14,7 @@ import { useFinishedMatch } from './hooks'
 import { Container } from '../../styled'
 import { Modal } from './styled'
 import { TournamentData } from '../../types'
+import { MatchDescription } from '../MatchDescription'
 
 type Props = {
   events: Events,
@@ -54,10 +55,13 @@ export const FinishedMatch = ({
 
       <Container>
         {!isEmpty(chapters) && (
-          <MultiSourcePlayer
+          <Fragment>
-            chapters={chapters}
+            <MultiSourcePlayer
-            onPlayingChange={onPlayingChange}
+              chapters={chapters}
-          />
+              onPlayingChange={onPlayingChange}
+            />
+            <MatchDescription profile={profile} />
+          </Fragment>
         )}
       </Container>
 

src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components/macro'
 
 export const Wrapper = styled.div`
   color: #FFFFFF;

src/features/MatchSidePlaylists/components/TabVideo/styled.tsx

@@ -1,7 +1,13 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
+import { customScrollbar } from 'features/Common'
 
 export const MatchesWrapper = styled.div`
+  overflow-y: scroll;
+  max-height: calc(100vh - 170px);
+  
   > :not(:last-child) {
     margin-bottom: 15px;
   }
+
+  ${customScrollbar}
 `

src/features/MatchSidePlaylists/index.tsx

@@ -86,7 +86,7 @@ export const MatchSidePlaylists = ({
           ) : null}
         </TabsGroup>
       </TabsWrapper>
-      <Container>
+      <Container forVideoTab={selectedTab === Tabs.VIDEO}>
         <TabPane
           tournamentData={tournamentData}
           events={events}

src/features/MatchSidePlaylists/styled.tsx

@@ -23,12 +23,16 @@ export const TabsWrapper = styled.div`
   padding-right: 18px;
 `
 
-export const Container = styled.div`
+type TContainer = {
+  forVideoTab?: boolean,
+}
+
+export const Container = styled.div<TContainer>`
   width: 320px;
   margin-top: 14px;
   padding: 0 10px 0 14px;
   max-height: calc(100vh - 170px);
-  overflow-y: scroll;
+  overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'none' : 'scroll')};
 
   ${customScrollbar}
 

src/features/MultiSourcePlayer/hooks/index.tsx

@@ -225,6 +225,15 @@ export const useMultiSourcePlayer = ({
     stopPlaying,
   ])
 
+  useEffect(() => {
+    if (ready && videoRef) {
+      videoRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      })
+    }
+  }, [ready, videoRef])
+
   return {
     activeChapterIndex,
     activePlayer,

src/features/StreamPlayer/styled.tsx

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
+import { devices } from 'config'
 
 export const ControlsGradient = styled.div`
   background-image: url(/images/player-controls-gradient.png);
@@ -100,6 +101,7 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
   position: relative;
   background-color: #000;
   margin-bottom: 5px;
+  min-height: 100%;
 
   :fullscreen {
     padding-top: 0;
@@ -111,6 +113,10 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
         height: 0px;
         padding-top: 56.25%;
       `}
+
+  ${devices.laptop} {
+    min-height: auto;
+  }
 `
 
 export const LoaderWrapper = styled.div`