From 522802f0054520a51eca9bed0bef3248ba61bb1c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 6 Oct 2025 16:29:23 +0000
Subject: [PATCH] Fix: Optimize detail pages for desktop

---
 src/components/rides/SimilarRides.tsx | 2 +-
 src/pages/OperatorDetail.tsx          | 2 +-
 src/pages/ParkDetail.tsx              | 2 +-
 src/pages/PropertyOwnerDetail.tsx     | 2 +-
 src/pages/RideDetail.tsx              | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/rides/SimilarRides.tsx b/src/components/rides/SimilarRides.tsx
index a1a04f8e..666f7065 100644
--- a/src/components/rides/SimilarRides.tsx
+++ b/src/components/rides/SimilarRides.tsx
@@ -79,7 +79,7 @@ export function SimilarRides({ currentRideId, parkId, parkSlug, category }: Simi
         <CardTitle>Similar Rides You Might Enjoy</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-5 xl:gap-4">
           {rides.map((ride) => (
             <RideCard 
               key={ride.id} 
diff --git a/src/pages/OperatorDetail.tsx b/src/pages/OperatorDetail.tsx
index 02d26001..e6d1dfa1 100644
--- a/src/pages/OperatorDetail.tsx
+++ b/src/pages/OperatorDetail.tsx
@@ -298,7 +298,7 @@ export default function OperatorDetail() {
                     ))}
                   </div>
                 ) : parks.length > 0 ? (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                     {parks.map((park) => (
                       <ParkCard key={park.id} park={park} />
                     ))}
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index d4efd5f6..e5fbf941 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -388,7 +388,7 @@ export default function ParkDetail() {
                     <CardTitle>Featured Rides</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-5 xl:gap-4">
                       {rides.slice(0, 4).map(ride => (
                         <RideCard 
                           key={ride.id} 
diff --git a/src/pages/PropertyOwnerDetail.tsx b/src/pages/PropertyOwnerDetail.tsx
index d3cdead8..352783c2 100644
--- a/src/pages/PropertyOwnerDetail.tsx
+++ b/src/pages/PropertyOwnerDetail.tsx
@@ -298,7 +298,7 @@ export default function PropertyOwnerDetail() {
                     ))}
                   </div>
                 ) : parks.length > 0 ? (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                     {parks.map((park) => (
                       <ParkCard key={park.id} park={park} />
                     ))}
diff --git a/src/pages/RideDetail.tsx b/src/pages/RideDetail.tsx
index fa2be17f..7f998d09 100644
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -291,7 +291,7 @@ export default function RideDetail() {
 
         {/* Quick Stats */}
         <div className="max-w-6xl mx-auto mb-8">
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-3 lg:gap-4">
           {ride.max_speed_kmh && (
             <Card>
               <CardContent className="p-4 text-center">