From b8bf8c85347962057d33324019242e654f664705 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 26 Sep 2026 15:24:09 +0700
Subject: [PATCH] fix(mobile): base grid column on remaining card grids +
 skeleton min-w-0 consistency

---
 src/pages/BountyLeaderboardPage.tsx | 2 +-
 src/pages/CoachDetailPage.tsx       | 2 +-
 src/pages/MarketplacePage.tsx       | 2 +-
 src/pages/SpotDetailPage.tsx        | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/BountyLeaderboardPage.tsx b/src/pages/BountyLeaderboardPage.tsx
index 04cb639..6738eb4 100644
--- a/src/pages/BountyLeaderboardPage.tsx
+++ b/src/pages/BountyLeaderboardPage.tsx
@@ -226,7 +226,7 @@ export default function BountyLeaderboardPage() {
               <Sparkles className="h-5 w-5 text-[#ccff00]" />
               How It Works
             </h2>
-            <div className="grid sm:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
               <div className="p-4 rounded-xl bg-black/40 border border-gray-800">
                 <div className="w-10 h-10 rounded-lg bg-[#ff0040]/20 flex items-center justify-center mb-3">
                   <MapPin className="h-5 w-5 text-[#ff0040]" />
diff --git a/src/pages/CoachDetailPage.tsx b/src/pages/CoachDetailPage.tsx
index 6048fcd..b6808e0 100644
--- a/src/pages/CoachDetailPage.tsx
+++ b/src/pages/CoachDetailPage.tsx
@@ -71,7 +71,7 @@ function CoachDetailSkeleton() {
               </CardContent>
             </Card>
           </div>
-          <div>
+          <div className="min-w-0">
             <Skeleton className="h-64 w-full" />
           </div>
         </div>
diff --git a/src/pages/MarketplacePage.tsx b/src/pages/MarketplacePage.tsx
index 583e741..27f2b6f 100644
--- a/src/pages/MarketplacePage.tsx
+++ b/src/pages/MarketplacePage.tsx
@@ -58,7 +58,7 @@ export default function MarketplacePage() {
               </div>
             </div>
 
-            <div className="grid md:grid-cols-3 gap-4 mb-6">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
               <div className="p-4 rounded-lg bg-black/50 border border-[#ff0040]/20">
                 <Shield className="h-6 w-6 text-[#ff0040] mb-2" />
                 <h3 className="font-bold text-white uppercase text-sm mb-1">No Fees</h3>
diff --git a/src/pages/SpotDetailPage.tsx b/src/pages/SpotDetailPage.tsx
index 03d7355..98c856a 100644
--- a/src/pages/SpotDetailPage.tsx
+++ b/src/pages/SpotDetailPage.tsx
@@ -96,7 +96,7 @@ function SpotDetailSkeleton() {
     <Layout>
       <div className="container px-4 py-8">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          <div className="lg:col-span-2 space-y-6">
+          <div className="lg:col-span-2 space-y-6 min-w-0">
             <Skeleton className="aspect-video w-full rounded-xl" />
             <div className="space-y-4">
               <Skeleton className="h-10 w-3/4" />
@@ -108,7 +108,7 @@ function SpotDetailSkeleton() {
               <Skeleton className="h-24 w-full" />
             </div>
           </div>
-          <div className="space-y-6">
+          <div className="space-y-6 min-w-0">
             <Skeleton className="h-64 w-full rounded-xl" />
             <Skeleton className="h-32 w-full rounded-xl" />
           </div>