feat(ott-2842): video layout fixes/

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

@@ -7,7 +7,8 @@ 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;

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

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

src/features/MatchSidePlaylists/styled.tsx

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

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%;