fix(#720): timeline media query fix

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)))
+    const sportIds = Array.from(new Set(tournamentList.map((t) => t.sport_id)))
-    setSportIds(qwe)
+    setSportIds(sportIds)
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tournamentList, selectedMode])
 

src/features/MatchesTimeline/styled.tsx

@@ -53,6 +53,11 @@ export const Tournament = styled.div<{
     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;