From 100235ca8ae319edbd46d3d2851e8bf3d0f5d0a6 Mon Sep 17 00:00:00 2001
From: Syco21 <davhv12@gmail.com>
Date: Fri, 15 May 2026 22:44:11 +0200
Subject: [PATCH] Fix swipe: use passive:false addEventListener on handle to
 bypass scroll interception

---
 src/pages/HomePage.jsx | 56 +++++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index f43c754..c912591 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -40,7 +40,39 @@ function HomePage() {
   const [artworkIndex, setArtworkIndex] = useState(0);
   const isMobile = useMediaQuery('(max-width: 768px)');
   const sheetRef = React.useRef(null);
+  const handleRef = React.useRef(null);
   const dragStartY = React.useRef(null);
+
+  React.useEffect(() => {
+    const handle = handleRef.current;
+    if (!handle) return;
+
+    const onStart = e => { dragStartY.current = e.touches[0].clientY; };
+    const onMove = e => {
+      e.preventDefault();
+      const dy = e.touches[0].clientY - dragStartY.current;
+      if (dy > 0 && sheetRef.current) sheetRef.current.style.transform = `translateY(${dy}px)`;
+    };
+    const onEnd = e => {
+      const dy = e.changedTouches[0].clientY - dragStartY.current;
+      if (dy > 80) {
+        setExpandedCardId(null);
+      } else if (sheetRef.current) {
+        sheetRef.current.style.transition = 'transform 0.2s ease';
+        sheetRef.current.style.transform = '';
+        setTimeout(() => { if (sheetRef.current) sheetRef.current.style.transition = ''; }, 200);
+      }
+    };
+
+    handle.addEventListener('touchstart', onStart, { passive: true });
+    handle.addEventListener('touchmove', onMove, { passive: false });
+    handle.addEventListener('touchend', onEnd, { passive: true });
+    return () => {
+      handle.removeEventListener('touchstart', onStart);
+      handle.removeEventListener('touchmove', onMove);
+      handle.removeEventListener('touchend', onEnd);
+    };
+  }, [expandedCardId, setExpandedCardId]);
   const debouncedSearch = useDebounce(searchTerm, 250);
 
   const loadCards = useCallback(() => fetchCards().then(setCards), []);
@@ -221,26 +253,10 @@ function HomePage() {
       {isMobile && expandedCard && (
         <>
           <div className="sheet-backdrop" onClick={() => setExpandedCardId(null)} />
-          <div
-            ref={sheetRef}
-            className="bottom-sheet"
-            onTouchStart={e => { dragStartY.current = e.touches[0].clientY; }}
-            onTouchMove={e => {
-              const dy = e.touches[0].clientY - dragStartY.current;
-              if (dy > 0 && sheetRef.current) sheetRef.current.style.transform = `translateY(${dy}px)`;
-            }}
-            onTouchEnd={e => {
-              const dy = e.changedTouches[0].clientY - dragStartY.current;
-              if (dy > 80) {
-                setExpandedCardId(null);
-              } else if (sheetRef.current) {
-                sheetRef.current.style.transition = 'transform 0.2s ease';
-                sheetRef.current.style.transform = '';
-                setTimeout(() => { if (sheetRef.current) sheetRef.current.style.transition = ''; }, 200);
-              }
-            }}
-          >
-            <div className="sheet-handle-area"><div className="sheet-handle" /></div>
+          <div ref={sheetRef} className="bottom-sheet">
+            <div ref={handleRef} className="sheet-handle-area">
+              <div className="sheet-handle" />
+            </div>
             <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}>
               {cardDetailContent(expandedCard)}
             </div>