Aimpress/Shumiland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

fix(locations): fix CardStack overflow on mobile
Some checks are pending
CI / Type Check (push) Waiting to run
Details
CI / Lint (push) Waiting to run
Details
CI / Unit Tests (push) Waiting to run
Details
Deploy / Build & Push Image (push) Waiting to run
Details
Deploy / Deploy to VPS (push) Blocked by required conditions
Details

Browse source 
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>
This commit is contained in:
Vadym Samoilenko 2026-06-10 14:02:02 +01:00
parent ffe76e9e2b
commit 9e1d0d9bb4
1 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/sections/LocationsCardStack.tsx
View file

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