diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx
index 5a21bd3d..a0c1816f 100644
--- a/src/features/MatchPage/styled.tsx
+++ b/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;
diff --git a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx
index f6f4ea97..1a07d61d 100644
--- a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx
+++ b/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;
diff --git a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx
index 21d0bff8..8ac7b73e 100644
--- a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx
+++ b/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' : '')};
> * {
diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx
index bf1c8b62..f4eb1acb 100644
--- a/src/features/MatchSidePlaylists/index.tsx
+++ b/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 = ({
-
-
-
-
-
-
+
+
+
)
}
diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx
index b82c6f5a..011a17f7 100644
--- a/src/features/MatchSidePlaylists/styled.tsx
+++ b/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`
- 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}
diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx
index 990851ab..c13215d5 100644
--- a/src/features/StreamPlayer/styled.tsx
+++ b/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`
width: 100%;
@@ -107,7 +107,7 @@ export const PlayerWrapper = styled.div`
? css`aspect-ratio: 16 / 9;`
: css`
height: 0px;
- object-fit: cover;
+ padding-top: 56.25%;
`}
${isMobileDevice
diff --git a/src/features/UserFavorites/styled.tsx b/src/features/UserFavorites/styled.tsx
index cd7da2fd..f541f7d6 100644
--- a/src/features/UserFavorites/styled.tsx
+++ b/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`