diff --git a/src/features/MatchPopup/components/FinishedMatchPlaylist/index.tsx b/src/features/MatchPopup/components/FinishedMatchPlaylist/index.tsx index 453b1d0b..d5d8a755 100644 --- a/src/features/MatchPopup/components/FinishedMatchPlaylist/index.tsx +++ b/src/features/MatchPopup/components/FinishedMatchPlaylist/index.tsx @@ -20,9 +20,13 @@ const List = styled.ul` margin-bottom: 0; } - @media ${devices.mobile} { + @media ${devices.tablet} { width: 100%; margin: 12px auto; + padding: 0 32px; + } + + @media ${devices.mobile} { padding: 0 12px; } ` @@ -32,6 +36,10 @@ const Item = styled.li` width: 420px; height: 50px; + @media ${devices.tablet} { + width: 48%; + } + @media ${devices.mobile} { width: 100%; height: 36px; diff --git a/src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx b/src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx index 2cdde308..822e8aaf 100644 --- a/src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx +++ b/src/features/MatchPopup/components/FinishedMatchPopup/styled.tsx @@ -15,8 +15,11 @@ export const Modal = styled(BaseModal)` background-color: #3F3F3F; border-radius: 5px; - @media ${devices.mobile} { + @media ${devices.tablet} { width: 100vw; + } + + @media ${devices.mobile} { height: 100vh; padding: 0; background-color: transparent; diff --git a/src/features/MatchPopup/components/PlayersList/styled.tsx b/src/features/MatchPopup/components/PlayersList/styled.tsx index 2e9d1310..e42ef882 100644 --- a/src/features/MatchPopup/components/PlayersList/styled.tsx +++ b/src/features/MatchPopup/components/PlayersList/styled.tsx @@ -4,7 +4,6 @@ import { devices } from 'config' import { Name } from 'features/Name' import { ProfileLogo } from 'features/ProfileLogo' -import { customScrollbar } from 'features/Common' import { Teams } from '../../types' @@ -14,21 +13,15 @@ type ListProps = { export const List = styled.ul` width: calc((100% - 30px) / 2); - height: 230px; - overflow: auto; display: flex; flex-wrap: wrap; + align-content: flex-start; flex-direction: ${({ team }) => ( team === Teams.TEAM1 ? 'row-reverse' : 'row' )}; - ${customScrollbar} - ::-webkit-scrollbar-thumb { - background-color: #555555; - } - @media ${devices.mobile} { width: 100%; height: auto; diff --git a/src/features/MatchPopup/components/PlaylistButton/index.tsx b/src/features/MatchPopup/components/PlaylistButton/index.tsx index 853cc761..39b882ab 100644 --- a/src/features/MatchPopup/components/PlaylistButton/index.tsx +++ b/src/features/MatchPopup/components/PlaylistButton/index.tsx @@ -68,8 +68,11 @@ export const Title = styled.span` text-transform: ${({ textTransform = 'uppercase' }) => textTransform}; color: #ffffff; - @media ${devices.mobile} { + @media ${devices.tablet} { font-size: 17px; + } + + @media ${devices.mobile} { line-height: 16px; margin-right: 16px; text-transform: none;