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.
This commit is contained in:
Viktor Barzin 2026-02-22 02:02:10 +00:00
parent a2c1f81644
commit 301579c255
No known key found for this signature in database
GPG key ID: 0EB088298288D958

View file

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