From e591e0766e6903d3fe30b7b7f8e44f34438e46be Mon Sep 17 00:00:00 2001
From: Lncvrt <lncvrtreal@gmail.com>
Date: Wed, 29 Jul 2026 07:22:32 -0700
Subject: [PATCH] Use dynamic slides per view

---
 src/app/main/page.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
index 29cd49a..d847257 100644
--- a/src/app/main/page.tsx
+++ b/src/app/main/page.tsx
@@ -14,7 +14,7 @@ import {
   faEllipsis,
   faPlay
 } from '@fortawesome/free-solid-svg-icons'
-import { useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 export default function HomePage () {
   const {
@@ -48,6 +48,19 @@ export default function HomePage () {
   const prevRef = useRef<HTMLButtonElement>(null)
   const nextRef = useRef<HTMLButtonElement>(null)
 
+  const [recentSlidesPerView, setRecentSlidesPerView] = useState(1)
+
+  useEffect(() => {
+    const update = () => {
+      setRecentSlidesPerView(Math.floor(window.innerWidth / 400))
+    }
+
+    update()
+    window.addEventListener('resize', update)
+
+    return () => window.removeEventListener('resize', update)
+  }, [])
+
   return (
     <div className='mx-4 mt-4'>
       <div className='flex flex-col gap-1 mb-4'>
@@ -63,7 +76,7 @@ export default function HomePage () {
             <Swiper
               modules={[Navigation]}
               spaceBetween={16}
-              slidesPerView={2}
+              slidesPerView={recentSlidesPerView}
               autoHeight={false}
               className='w-full'
               onSwiper={swiper => {