Ott 304 responsive main screen fn (#100)

src/config/devices.tsx

@@ -1,5 +1,7 @@
 export const devices = {
+  desktop: '(max-width: 1784px)',
   laptop: '(max-width: 1280px)',
+  large: '(max-width: 1900px)',
   mobile: '(max-width: 640px)',
   tablet: '(max-width: 1024px)',
 }

src/features/Header/styled.tsx

@@ -38,7 +38,7 @@ export const SearchWrapper = styled(FilterWrapper)`
   margin-right: 16px;
   display: flex;
 
-  @media${devices.laptop} {
+  @media${devices.desktop} {
     width: 51px;
     margin-right: 9px;
 
@@ -51,6 +51,10 @@ export const SearchWrapper = styled(FilterWrapper)`
 export const SportFilterWrapper = styled(FilterWrapper)`
   width: 400px;
 
+  @media${devices.desktop} {
+    width: 350px;
+  }
+
   @media${devices.laptop} {
     width: 234px;
   }

src/features/HeaderFilters/components/TournamentFilter/styled.tsx

@@ -12,6 +12,12 @@ export const ListWrapper = styled.div`
   overflow-y: scroll;
   z-index: 2;
 
+  @media${devices.laptop} {
+    right: 0;
+    bottom: -1px;
+    left: auto;
+  }
+
   @media${devices.tablet} {
     width: 200%;
     left: -100%;

src/features/MatchCard/styled.tsx

@@ -2,15 +2,14 @@ import styled from 'styled-components/macro'
 
 import { devices } from 'config/devices'
 import { T9n } from 'features/T9n'
-import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from './config'
+import { MATCH_CARD_WIDTH } from './config'
 
 export const CardWrapper = styled.li.attrs({
   tabIndex: 0,
 })`
   position: relative;
   flex: 0 0 auto;
-  width: ${MATCH_CARD_WIDTH}px;
+  min-width: ${MATCH_CARD_WIDTH}px;
-  margin-right: ${MATCH_CARD_GAP}px;
   padding-bottom: 18px;
   border-radius: 2px;
   border: 2px solid transparent;
@@ -19,8 +18,9 @@ export const CardWrapper = styled.li.attrs({
   cursor: pointer;
   transition: border 0.5s ease-out;
 
+
   @media${devices.laptop} {
-    width: 279px;
+    min-width: 279px;
     height: 279px;
     margin: 0;
   }

src/features/MatchesGrid/styled.tsx

@@ -4,14 +4,10 @@ import { devices } from 'config/devices'
 
 export const Wrapper = styled.ul`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(279px, 288px));
+  grid-template-columns: repeat(6, 288px);
   grid-gap: 13px;
-
+ 
-  @media${devices.laptop} {
+  @media${devices.large} {
-    grid-template-columns: repeat(4, 279px);
-  }
-
-  @media${devices.tablet} {
     grid-template-columns: repeat(auto-fit, minmax(279px, 1fr));
   }
 `

src/features/Menu/styled.tsx

@@ -14,7 +14,7 @@ export const Wrapper = styled.nav`
   margin-left: 90px;
   margin-right: 14px;
 
-  @media${devices.laptop} {
+  @media${devices.desktop} {
     margin-left: 23px;
     margin-right: 0;
   }
@@ -44,6 +44,13 @@ export const MenuList = styled.ul`
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   z-index: 1;
 
+  @media${devices.laptop} {
+    top: 55px;
+    left: 0;
+    width: 288px;
+  }
+
+
   @media${devices.tablet} {
     right: 0;
     left: auto;
@@ -60,6 +67,10 @@ export const MenuList = styled.ul`
     transform: translate(-50%, -50%) rotate(45deg);
     background-color: #666;
 
+    @media${devices.laptop} {
+      left: 4%;
+    }
+
     @media${devices.tablet} {
       left: 97%;
     }

src/features/Search/styled.tsx

@@ -21,7 +21,7 @@ export const Form = styled.form`
     margin: 0;
     padding-bottom: 13px;
 
-     @media${devices.laptop} {
+     @media${devices.desktop} {
         padding-left: 12px;
       }
 
@@ -33,7 +33,7 @@ export const Form = styled.form`
       }
   }
   
-  @media${devices.laptop} {
+  @media${devices.desktop} {
     width: 51px;
 
     :focus-within {
@@ -76,7 +76,7 @@ export const Form = styled.form`
       background-image: url(/images/search.svg);
       background-repeat: no-repeat;
 
-      @media${devices.laptop} {
+      @media${devices.desktop} {
         margin-right: 0;
       }
       @media${devices.tablet} {