style(#ott-706): removed scroll from players list in match popup (#270)

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;

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;

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<ListProps>`
   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;

src/features/MatchPopup/components/PlaylistButton/index.tsx

@@ -68,8 +68,11 @@ export const Title = styled.span<TitleProps>`
   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;