From 9e1d0d9bb4a30c4486be7e5e53ff534efb4b3271 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 10 Jun 2026 14:02:02 +0100
Subject: [PATCH] fix(locations): fix CardStack overflow on mobile

Container now full-width with overflow-hidden on mobile; cards fill container.
Fixed w-[520px] was overflowing 360px viewport by 160px.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/sections/LocationsCardStack.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sections/LocationsCardStack.tsx b/src/components/sections/LocationsCardStack.tsx
index f566530..508810f 100644
--- a/src/components/sections/LocationsCardStack.tsx
+++ b/src/components/sections/LocationsCardStack.tsx
@@ -52,7 +52,7 @@ function LocationCard({ loc, position, onShuffle }: CardProps) {
         dragRef.current = 0
       }}
       transition={{ duration: 0.4, ease: 'easeInOut' }}
-      className={`absolute top-0 left-0 h-[300px] w-[460px] overflow-hidden rounded-[24px] shadow-2xl select-none md:h-[340px] md:w-[520px] ${
+      className={`absolute top-0 left-0 h-full w-full overflow-hidden rounded-[24px] shadow-2xl select-none md:h-[340px] md:w-[520px] ${
         isFront ? 'cursor-grab active:cursor-grabbing' : 'pointer-events-none'
       }`}
     >
@@ -125,7 +125,7 @@ export function LocationsCardStack({ locations }: { locations: LocationData[] })
   return (
     <div className="flex flex-col items-center gap-8 lg:flex-row lg:items-center lg:gap-28">
       {/* Card stack */}
-      <div className="relative h-[340px] w-[520px] shrink-0 md:h-[380px] md:w-[580px]">
+      <div className="relative h-[300px] w-full shrink-0 overflow-hidden md:h-[380px] md:w-[580px] md:overflow-visible">
         {locations.map((loc, i) => (
           <LocationCard
             key={loc.slug}