diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx
index a0c1816f..5a21bd3d 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: 100%;
+ width: 96%;
height: calc(100vh - 115px);
margin: 20px 0px 0 10px;
display: flex;
@@ -27,8 +27,7 @@ export const Wrapper = styled.div`
`
export const Container = styled.div`
- width: 100%;
- max-width: 2090px;
+ min-width: 83%;
max-height: 896px;
display: flex;
flex-direction: column;
@@ -47,6 +46,7 @@ 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 1a07d61d..f6f4ea97 100644
--- a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx
@@ -7,10 +7,11 @@ 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;
+ margin-right: 2%;
}
${isMobileDevice ? css`
@@ -27,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;
diff --git a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx
index 8ac7b73e..21d0bff8 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;
- max-height: calc(100vh - 170px);
+ height: 95%;
padding-right: ${({ hasScroll }) => (hasScroll ? '10px' : '')};
> * {
diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx
index f4eb1acb..bf1c8b62 100644
--- a/src/features/MatchSidePlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/index.tsx
@@ -22,6 +22,7 @@ import {
Wrapper,
TabsWrapper,
Container,
+ ContainerWrapper,
} from './styled'
const tabPanes = {
@@ -122,19 +123,22 @@ export const MatchSidePlaylists = ({
-
-
-
+
+
+
+
+
+
)
}
diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx
index 011a17f7..b82c6f5a 100644
--- a/src/features/MatchSidePlaylists/styled.tsx
+++ b/src/features/MatchSidePlaylists/styled.tsx
@@ -7,12 +7,15 @@ 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}
`
: ''};
@@ -20,7 +23,8 @@ export const Wrapper = styled.div`
export const TabsWrapper = styled.div`
padding-left: 14px;
-
+ height: 4%;
+
${isMobileDevice
? css`
padding: 0 5px;
@@ -28,17 +32,28 @@ export const TabsWrapper = styled.div`
: ''};
`
+export const ContainerWrapper = styled.div`
+ padding-top: 14px;
+ height: 100%;
+ max-width: 300px;
+
+ ${isMobileDevice
+ ? css`
+ max-width: 100%;
+ `
+ : ''};
+`
+
type TContainer = {
forVideoTab?: boolean,
hasScroll: boolean,
}
export const Container = styled.div`
- width: 320px;
- margin-top: 14px;
- padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 18px 0 14px')};
+ height: 96%;
+ padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 10px 0 14px')};
max-height: calc(100vh - 130px);
- overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')};
+ overflow: ${({ 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 c13215d5..990851ab 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') && isMobileDevice
+const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9')
export const PlayerWrapper = styled.div`
width: 100%;
@@ -107,7 +107,7 @@ export const PlayerWrapper = styled.div`
? css`aspect-ratio: 16 / 9;`
: css`
height: 0px;
- padding-top: 56.25%;
+ object-fit: cover;
`}
${isMobileDevice
diff --git a/src/features/UserFavorites/styled.tsx b/src/features/UserFavorites/styled.tsx
index f541f7d6..cd7da2fd 100644
--- a/src/features/UserFavorites/styled.tsx
+++ b/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`