From 301579c255c5fd5c53091c5f5213da1e997cb7bb Mon Sep 17 00:00:00 2001
From: Viktor Barzin <viktorbarzin@meta.com>
Date: Sun, 22 Feb 2026 02:02:10 +0000
Subject: [PATCH] Separate photo swipe from card swipe gestures

Move drag handler from outer card to details section only.
Swiping on photos now navigates the carousel, swiping on
the details area below triggers like/dislike/skip actions.
---
 frontend/src/components/SwipeCard.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/SwipeCard.tsx b/frontend/src/components/SwipeCard.tsx
index ea685ed..4ed15c4 100644
--- a/frontend/src/components/SwipeCard.tsx
+++ b/frontend/src/components/SwipeCard.tsx
@@ -92,17 +92,14 @@ export function SwipeCard({ feature, onSwipe, onTap, isTop, stackIndex }: SwipeC
 
   return (
     <animated.div
-      {...(isTop ? bind() : {})}
       style={{
         ...style,
-        touchAction: 'none',
         position: 'absolute' as const,
         width: '100%',
         height: '100%',
         zIndex: 10 - stackIndex,
         top: stackIndex * 8,
       }}
-      className="cursor-grab active:cursor-grabbing"
     >
       <div className="relative bg-background rounded-2xl border shadow-lg overflow-hidden mx-4 h-full flex flex-col">
         {/* Color overlay */}
@@ -160,8 +157,12 @@ export function SwipeCard({ feature, onSwipe, onTap, isTop, stackIndex }: SwipeC
           </button>
         </div>
 
-        {/* Details — bottom half */}
-        <div className="flex-1 min-h-0 p-4 flex flex-col gap-3 overflow-y-auto">
+        {/* Details — bottom half (swipe here to like/dislike) */}
+        <div
+          {...(isTop ? bind() : {})}
+          className="flex-1 min-h-0 p-4 flex flex-col gap-3 overflow-y-auto cursor-grab active:cursor-grabbing"
+          style={{ touchAction: 'none' }}
+        >
           {/* Price */}
           <div className="text-2xl font-semibold">
             £{p.total_price.toLocaleString()}