Revert "feat(ott-2842): fixes"

This reverts commit e8070b489f.

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;

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;
+  margin-bottom: 10px;
-  height: 5%;
 
   > :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`
   overflow-y: auto;
-  height: 95%;
+  max-height: calc(100vh - 170px);
   padding-right: 5px;
 
   > * {

src/features/MatchSidePlaylists/styled.tsx

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