feat(ott-2842): match layout fixes

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,8 @@ export const Wrapper = styled.div`
 `
 
 export const Container = styled.div`
-  width: 100%;
-  max-width: 2090px;
+  //width: 100%;
+  min-width: 83%;
   max-height: 896px;
   display: flex;
   flex-direction: column;

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

@@ -11,7 +11,7 @@ export const Wrapper = styled.div`
   height: 5%;
 
   > :not(:last-child) {
-    margin-right: 20px;
+    margin-right: 2%;
   }
 
   ${isMobileDevice ? css`
@@ -28,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/styled.tsx

@@ -6,6 +6,7 @@ import { isMobileDevice } from 'config/userAgent'
 import { customScrollbar } from 'features/Common'
 
 export const Wrapper = styled.div`
+  min-width: 17%;
   max-height: 896px;
   ${isMobileDevice
     ? css`
@@ -34,11 +35,11 @@ type TContainer = {
 }
 
 export const Container = styled.div<TContainer>`
-  width: 320px;
+  //width: 320px;
   padding: 14px 10px 0 14px;
   height: 96%;
   max-height: calc(100vh - 130px);
-  overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
+  overflow: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
 
   ${customScrollbar}
 

src/features/StreamPlayer/styled.tsx

@@ -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`