Revert "feat(ott-2880): video layout fixes"

This reverts commit 35b5d122c0.

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: 96%;
+  width: 100%;
   height: calc(100vh - 115px);
   margin: 20px 0px 0 10px;
   display: flex;
@@ -27,7 +27,8 @@ export const Wrapper = styled.div`
 `
 
 export const Container = styled.div`
-  min-width: 83%;
+  width: 100%;
+  max-width: 2090px;
   max-height: 896px;
   display: flex;
   flex-direction: column;
@@ -46,7 +47,6 @@ 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,11 +7,10 @@ export const Wrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: 10px;
-  height: 5%;
-  
+  margin-bottom: 10px;
+
   > :not(:last-child) {
-    margin-right: 2%;
+    margin-right: 20px;
   }
 
   ${isMobileDevice ? css`
@@ -28,7 +27,7 @@ export const WeekDay = styled.div.attrs(() => ({
 }))<{isActive?: boolean}>`
   position: relative;
   color: rgba(255, 255, 255, 0.5);
-  font-size: 0.6rem;
+  font-size: 12px;
   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;
-  height: 95%;
+  max-height: calc(100vh - 170px);
   padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')};
 
   > * {

src/features/MatchSidePlaylists/index.tsx

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

src/features/MatchSidePlaylists/styled.tsx

@@ -7,15 +7,12 @@ 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}
     `
     : ''};
@@ -23,23 +20,10 @@ export const Wrapper = styled.div`
 
 export const TabsWrapper = styled.div`
   padding-left: 14px;
-  height: 4%;
-  
-  ${isMobileDevice
-    ? css`
-      padding: 0 5px;
-    `
-    : ''};
-`
-
-export const ContainerWrapper = styled.div`
-  padding-top: 14px;
-  height: 100%;
-  max-width: 300px;
 
   ${isMobileDevice
     ? css`
-      max-width: 100%;
+      padding: 0 5px;
     `
     : ''};
 `
@@ -50,10 +34,11 @@ type TContainer = {
 }
 
 export const Container = styled.div<TContainer>`
-  height: 96%;
-  padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 10px 0 14px')};
+  width: 320px;
+  margin-top: 14px;
+  padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 18px 0 14px')};
   max-height: calc(100vh - 130px);
-  overflow: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
+  overflow-y: ${({ 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')
+const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9') && isMobileDevice
 
 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;
-        object-fit: cover;
+        padding-top: 56.25%;
       `}
 
   ${isMobileDevice

src/features/UserFavorites/styled.tsx

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