fix(#720): fix media query

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)
   }
 

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;

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])