From fb4acfbebdf88847de8603eec67b6228e601a057 Mon Sep 17 00:00:00 2001
From: Rakov <roman.rakov@insports.tv>
Date: Thu, 7 Sep 2023 11:35:11 +0300
Subject: [PATCH] fix(#720): fix media query

---
 src/features/MatchesSlider/index.tsx   | 4 +++-
 src/features/MatchesSlider/styled.tsx  | 5 +++++
 src/features/MatchesTimeline/hooks.tsx | 4 ++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/features/MatchesSlider/index.tsx b/src/features/MatchesSlider/index.tsx
index f1b546bf..311352e7 100644
--- a/src/features/MatchesSlider/index.tsx
+++ b/src/features/MatchesSlider/index.tsx
@@ -55,9 +55,11 @@ export const MatchesSlider = ({ matches }: MatchesSliderProps) => {
   })
 
   const scrollToMatchByIndex = (index: number) => {
+    const offsetLeftCount = slidesRef.current!.querySelectorAll('li')[index].offsetLeft
     const PADDING_PARENT = 10
 
-    const offsetLeft = slidesRef.current!.querySelectorAll('li')[index].offsetLeft - PADDING_PARENT
+    const offsetLeft = offsetLeftCount - PADDING_PARENT
+
     slidesRef.current!.scrollBy(offsetLeft, 0)
   }
 
diff --git a/src/features/MatchesSlider/styled.tsx b/src/features/MatchesSlider/styled.tsx
index eb341941..50869c53 100644
--- a/src/features/MatchesSlider/styled.tsx
+++ b/src/features/MatchesSlider/styled.tsx
@@ -43,6 +43,11 @@ export const Slides = styled.ul`
       width: 13.4rem;
     }
 
+    @media screen and (max-width: 1600px) {
+      height: 13rem;
+      width: 13rem;
+    }
+
     @media screen and (max-width: 1440px) {
       height: 12.8rem;
       width: 12.8rem;
diff --git a/src/features/MatchesTimeline/hooks.tsx b/src/features/MatchesTimeline/hooks.tsx
index d2cd0818..2f63f593 100644
--- a/src/features/MatchesTimeline/hooks.tsx
+++ b/src/features/MatchesTimeline/hooks.tsx
@@ -97,8 +97,8 @@ export const useTimeline = () => {
   useEffect(() => {
     if (!isHomePage) return
 
-    const qwe = Array.from(new Set(tournamentList.map((t) => t.sport_id)))
-    setSportIds(qwe)
+    const sportIds = Array.from(new Set(tournamentList.map((t) => t.sport_id)))
+    setSportIds(sportIds)
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tournamentList, selectedMode])