feat(ott-2880): video layout fixes

feat(ott-2880): video layout 2

feat(ott-2880): video fix

src/features/MatchPage/styled.tsx

@@ -4,7 +4,7 @@ import { devices } from 'config/devices'
 import { isMobileDevice } from 'config/userAgent'
 
 export const Wrapper = styled.div`
-  width: 100%;
+  width: 96%;
   height: calc(100vh - 115px);
   margin: 20px 0px 0 10px;
   display: flex;
@@ -27,8 +27,7 @@ export const Wrapper = styled.div`
 `
 
 export const Container = styled.div`
-  width: 100%;
+  min-width: 83%;
-  max-width: 2090px;
   max-height: 896px;
   display: flex;
   flex-direction: column;
@@ -47,6 +46,7 @@ export const Container = styled.div`
         padding: 0;
         margin-bottom: 15px;
         min-height: min-content;
+        min-width: auto;
 
       @media screen and (orientation: landscape){
         display: block;

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

@@ -7,10 +7,11 @@ export const Wrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 10px;
+  padding-bottom: 10px;
+  height: 5%;
   
   > :not(:last-child) {
-    margin-right: 20px;
+    margin-right: 2%;
   }
 
   ${isMobileDevice ? css`
@@ -27,7 +28,7 @@ export const WeekDay = styled.div.attrs(() => ({
 }))<{isActive?: boolean}>`
   position: relative;
   color: rgba(255, 255, 255, 0.5);
-  font-size: 12px;
+  font-size: 0.6rem;
   white-space: nowrap;
   padding: 5px;
   cursor: pointer;

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

@@ -4,7 +4,7 @@ import { isMobileDevice } from '../../../../config/userAgent'
 
 export const MatchesWrapper = styled.div<{hasScroll?: boolean}>`
   overflow-y: auto;
-  max-height: calc(100vh - 170px);
+  height: 95%;
   padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')};
 
   > * {

src/features/MatchSidePlaylists/index.tsx

@@ -22,6 +22,7 @@ import {
   Wrapper,
   TabsWrapper,
   Container,
+  ContainerWrapper,
 } from './styled'
 
 const tabPanes = {
@@ -122,19 +123,22 @@ export const MatchSidePlaylists = ({
         </TabsGroup>
 
       </TabsWrapper>
-      <Container
+      <ContainerWrapper>
-        hasScroll={hasTabPaneScroll}
+        <Container
-        ref={tabPaneContainerRef}
+          hasScroll={hasTabPaneScroll}
-        forVideoTab={selectedTab === Tabs.VIDEO}
+          ref={tabPaneContainerRef}
-      >
+          forVideoTab={selectedTab === Tabs.VIDEO}
-        <TabPane
+        >
-          tournamentData={tournamentData}
+          <TabPane
-          onSelect={onSelect}
+            tournamentData={tournamentData}
-          playlists={playlists}
+            onSelect={onSelect}
-          profile={profile}
+            playlists={playlists}
-          selectedPlaylist={selectedPlaylist}
+            profile={profile}
-        />
+            selectedPlaylist={selectedPlaylist}
-      </Container>
+          />
+        </Container>
+      </ContainerWrapper>
+
     </Wrapper>
   )
 }

src/features/MatchSidePlaylists/styled.tsx

@@ -7,11 +7,14 @@ import { customScrollbar } from 'features/Common'
 
 export const Wrapper = styled.div`
   padding-right: 14px;
+  min-width: 17%;
+  max-height: 896px;
 
   ${isMobileDevice
     ? css`
       overflow-y: auto;
       width: 100%;
+      padding-right: 10px;
             
       ${customScrollbar}
     `
@@ -20,6 +23,7 @@ export const Wrapper = styled.div`
 
 export const TabsWrapper = styled.div`
   padding-left: 14px;
+  height: 4%;
   
   ${isMobileDevice
     ? css`
@@ -28,17 +32,28 @@ export const TabsWrapper = styled.div`
     : ''};
 `
 
+export const ContainerWrapper = styled.div`
+  padding-top: 14px;
+  height: 100%;
+  max-width: 300px;
+
+  ${isMobileDevice
+    ? css`
+      max-width: 100%;
+    `
+    : ''};
+`
+
 type TContainer = {
   forVideoTab?: boolean,
   hasScroll: boolean,
 }
 
 export const Container = styled.div<TContainer>`
-  width: 320px;
+  height: 96%;
-  margin-top: 14px;
+  padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 10px 0 14px')};
-  padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 18px 0 14px')};
   max-height: calc(100vh - 130px);
-  overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
+  overflow: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
   padding-right: ${({ forVideoTab }) => (forVideoTab ? '0' : '')};
 
   ${customScrollbar}

src/features/StreamPlayer/styled.tsx

@@ -93,7 +93,7 @@ export const ControlsGroup = styled.div`
     : ''};
 `
 
-const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9') && isMobileDevice
+const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9')
 
 export const PlayerWrapper = styled.div<PlayStopProps>`
   width: 100%;
@@ -107,7 +107,7 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
     ? css`aspect-ratio: 16 / 9;`
     : css`
         height: 0px;
-        padding-top: 56.25%;
+        object-fit: cover;
       `}
 
   ${isMobileDevice

src/features/UserFavorites/styled.tsx

@@ -19,6 +19,7 @@ export const UserSportFavWrapper = styled.aside`
   top: 0;
   bottom: 0;
   z-index: 10;
+  width: 4%;
 
   ${isMobileDevice
     ? css`