From b22d74c3814d4eaa8a956fe574acb0b1e128a2db 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:03:35 +0000
Subject: [PATCH] Refactor: Improve desktop layout

---
 src/components/rides/RideHighlights.tsx |  2 +-
 src/components/rides/SimilarRides.tsx   |  2 +-
 src/pages/ParkDetail.tsx                |  8 +++--
 src/pages/RideDetail.tsx                | 41 ++++++++++++++-----------
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/rides/RideHighlights.tsx b/src/components/rides/RideHighlights.tsx
index dcc9c87e..c73f0da4 100644
--- a/src/components/rides/RideHighlights.tsx
+++ b/src/components/rides/RideHighlights.tsx
@@ -62,7 +62,7 @@ export function RideHighlights({ ride }: RideHighlightsProps) {
         <CardTitle>Ride Highlights</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-4 gap-4 max-w-4xl mx-auto">
+        <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4">
           {highlights.map((highlight, index) => (
             <div key={index} className="flex flex-col items-center text-center p-4 rounded-lg bg-accent/50">
               <div className="mb-2">{highlight.icon}</div>
diff --git a/src/components/rides/SimilarRides.tsx b/src/components/rides/SimilarRides.tsx
index 776fcb39..13e2fcb4 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 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-4">
           {rides.map((ride) => (
             <RideCard 
               key={ride.id} 
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index c54e0cd0..c4645f30 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -368,10 +368,11 @@ export default function ParkDetail() {
           </TabsList>
 
           <TabsContent value="overview" className="mt-6">
-            <div className="grid lg:grid-cols-3 gap-6">
+            <div className="grid lg:grid-cols-[1fr,1fr,340px] xl:grid-cols-[1fr,1fr,380px] gap-6">
+              {/* Main content - spans 2 columns on desktop */}
               <div className="lg:col-span-2 space-y-6">
                 {/* Description */}
-                {park.description && <Card>
+                {park.description && <Card className="max-w-prose mx-auto lg:mx-0">
                     <CardHeader>
                       <CardTitle>About {park.name}</CardTitle>
                     </CardHeader>
@@ -413,7 +414,8 @@ export default function ParkDetail() {
                 </Card>
               </div>
 
-              <div className="space-y-6">
+              {/* Sidebar - single column on desktop */}
+              <div className="space-y-6 lg:row-span-2">
                 {/* Park Information */}
                 <Card>
                   <CardHeader>
diff --git a/src/pages/RideDetail.tsx b/src/pages/RideDetail.tsx
index f17d04b1..06cd2bae 100644
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -290,8 +290,8 @@ export default function RideDetail() {
         </div>
 
         {/* Quick Stats */}
-        <div className="max-w-7xl mx-auto mb-8">
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
+        <div className="max-w-5xl mx-auto mb-8">
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4">
           {ride.max_speed_kmh && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -393,11 +393,12 @@ export default function RideDetail() {
           </TabsList>
 
           <TabsContent value="overview" className="mt-6">
-            <div className="grid lg:grid-cols-2 gap-6">
-              <div className="space-y-6">
+            <div className="grid lg:grid-cols-[1fr,1fr,340px] xl:grid-cols-[1fr,1fr,380px] gap-6">
+              {/* Main content - spans 2 columns on desktop */}
+              <div className="lg:col-span-2 space-y-6">
                 {/* Description */}
                 {ride.description && (
-                  <Card>
+                  <Card className="max-w-prose mx-auto lg:mx-0">
                     <CardHeader>
                       <CardTitle>About {ride.name}</CardTitle>
                     </CardHeader>
@@ -412,21 +413,10 @@ export default function RideDetail() {
                 {ride.name_history && ride.name_history.length > 0 && (
                   <FormerNames nameHistory={ride.name_history} currentName={ride.name} />
                 )}
-
-                <SimilarRides 
-                  currentRideId={ride.id}
-                  parkId={(ride as any).currentParkId}
-                  parkSlug={parkSlug || ''}
-                  category={ride.category}
-                />
-
-                <RecentPhotosPreview 
-                  rideId={ride.id}
-                  onViewAll={() => setActiveTab("photos")}
-                />
               </div>
 
-              <div className="space-y-6">
+              {/* Sidebar - single column on desktop */}
+              <div className="space-y-6 lg:row-span-2">
                 <RatingDistribution 
                   rideId={ride.id}
                   totalReviews={ride.review_count}
@@ -540,6 +530,21 @@ export default function RideDetail() {
                   </CardContent>
                 </Card>
               </div>
+
+              {/* Full-width sections below */}
+              <div className="lg:col-span-3 space-y-6">
+                <SimilarRides 
+                  currentRideId={ride.id}
+                  parkId={(ride as any).currentParkId}
+                  parkSlug={parkSlug || ''}
+                  category={ride.category}
+                />
+
+                <RecentPhotosPreview 
+                  rideId={ride.id}
+                  onViewAll={() => setActiveTab("photos")}
+                />
+              </div>
             </div>
           </TabsContent>