From 88901a7f2042914b45137b5190c59b04ef51a1d5 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:10:37 +0000
Subject: [PATCH] Fix desktop layout

---
 src/components/rides/RecentPhotosPreview.tsx |   2 +-
 src/components/rides/RideCard.tsx            |   9 +-
 src/components/rides/SimilarRides.tsx        |   2 +-
 src/pages/ParkDetail.tsx                     | 107 ++++++++---------
 src/pages/RideDetail.tsx                     | 115 ++++++++++---------
 5 files changed, 121 insertions(+), 114 deletions(-)

diff --git a/src/components/rides/RecentPhotosPreview.tsx b/src/components/rides/RecentPhotosPreview.tsx
index c230f40a..71db47bd 100644
--- a/src/components/rides/RecentPhotosPreview.tsx
+++ b/src/components/rides/RecentPhotosPreview.tsx
@@ -66,7 +66,7 @@ export function RecentPhotosPreview({ rideId, onViewAll }: RecentPhotosPreviewPr
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-3">
           {photos.map((photo) => (
             <div
               key={photo.id}
diff --git a/src/components/rides/RideCard.tsx b/src/components/rides/RideCard.tsx
index ab01de83..90846350 100644
--- a/src/components/rides/RideCard.tsx
+++ b/src/components/rides/RideCard.tsx
@@ -10,9 +10,10 @@ interface RideCardProps {
   showParkName?: boolean;
   className?: string;
   parkSlug?: string;
+  compact?: boolean;
 }
 
-export function RideCard({ ride, showParkName = true, className, parkSlug }: RideCardProps) {
+export function RideCard({ ride, showParkName = true, className, parkSlug, compact = false }: RideCardProps) {
   const navigate = useNavigate();
 
   const handleRideClick = () => {
@@ -49,12 +50,12 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
 
   return (
     <Card 
-      className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02] ${className}`}
+      className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02] ${compact ? 'max-w-sm' : ''} ${className}`}
       onClick={handleRideClick}
     >
       <div className="relative overflow-hidden">
         {/* Image/Icon Section */}
-        <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
+        <div className={`bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative ${compact ? 'aspect-[4/3]' : 'aspect-video'}`}>
           {(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
             <img 
               src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.card_image_id}/public` : ride.image_url)} 
@@ -78,7 +79,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
           </Badge>
         </div>
 
-        <CardContent className="p-4 space-y-3">
+        <CardContent className={`space-y-3 ${compact ? 'p-3' : 'p-4'}`}>
           {/* Header */}
           <div className="space-y-1">
             <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
diff --git a/src/components/rides/SimilarRides.tsx b/src/components/rides/SimilarRides.tsx
index 13e2fcb4..c2242893 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 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
           {rides.map((ride) => (
             <RideCard 
               key={ride.id} 
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index c4645f30..da5e36b4 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -358,64 +358,66 @@ export default function ParkDetail() {
         </div>
 
         {/* Main Content */}
-        <Tabs defaultValue="overview" className="w-full">
-          <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
-            <TabsTrigger value="reviews">Reviews</TabsTrigger>
-            <TabsTrigger value="photos">Photos</TabsTrigger>
-            <TabsTrigger value="history">History</TabsTrigger>
-          </TabsList>
+        <div className="max-w-7xl mx-auto px-4 lg:px-6">
+          <Tabs defaultValue="overview" className="w-full">
+            <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
+              <TabsTrigger value="reviews">Reviews</TabsTrigger>
+              <TabsTrigger value="photos">Photos</TabsTrigger>
+              <TabsTrigger value="history">History</TabsTrigger>
+            </TabsList>
 
-          <TabsContent value="overview" className="mt-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 className="max-w-prose mx-auto lg:mx-0">
+            <TabsContent value="overview" className="mt-6">
+              <div className="grid lg:grid-cols-[2fr,1fr] xl:grid-cols-[1.5fr,1fr] gap-6">
+                {/* Left column - main content */}
+                <div className="space-y-6">
+                  {/* Description */}
+                  {park.description && <Card>
+                      <CardHeader>
+                        <CardTitle>About {park.name}</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-muted-foreground leading-relaxed text-base">
+                          {park.description}
+                        </p>
+                      </CardContent>
+                    </Card>}
+
+                  {/* Featured Rides */}
+                  <Card>
                     <CardHeader>
-                      <CardTitle>About {park.name}</CardTitle>
+                      <CardTitle>Featured Rides</CardTitle>
                     </CardHeader>
                     <CardContent>
-                      <p className="text-muted-foreground leading-relaxed">
-                        {park.description}
-                      </p>
-                    </CardContent>
-                  </Card>}
-
-                {/* Featured Rides */}
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Featured Rides</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                      {rides.slice(0, 6).map(ride => (
-                        <RideCard 
-                          key={ride.id} 
-                          ride={ride} 
-                          showParkName={false}
-                          parkSlug={park.slug}
-                          className="h-full"
-                        />
-                      ))}
-                    </div>
-                    {rides.length > 6 && (
-                      <div className="mt-4 text-center">
-                        <Button 
-                          variant="outline" 
-                          onClick={() => navigate(`/parks/${park.slug}/rides/`)}
-                        >
-                          View All {park.ride_count} Rides
-                        </Button>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        {rides.slice(0, 6).map(ride => (
+                          <RideCard 
+                            key={ride.id} 
+                            ride={ride} 
+                            showParkName={false}
+                            parkSlug={park.slug}
+                            className="h-full"
+                            compact={true}
+                          />
+                        ))}
                       </div>
-                    )}
-                  </CardContent>
-                </Card>
-              </div>
+                      {rides.length > 6 && (
+                        <div className="mt-4 text-center">
+                          <Button 
+                            variant="outline" 
+                            onClick={() => navigate(`/parks/${park.slug}/rides/`)}
+                          >
+                            View All {park.ride_count} Rides
+                          </Button>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                </div>
 
-              {/* Sidebar - single column on desktop */}
-              <div className="space-y-6 lg:row-span-2">
+                {/* Right sidebar - sticky on desktop */}
+                <div className="space-y-6 lg:sticky lg:top-6 lg:self-start">
                 {/* Park Information */}
                 <Card>
                   <CardHeader>
@@ -631,6 +633,7 @@ export default function ParkDetail() {
             </Tabs>
           </TabsContent>
         </Tabs>
+        </div>
 
         {/* Add Ride Modal */}
         <Dialog open={isAddRideModalOpen} onOpenChange={setIsAddRideModalOpen}>
diff --git a/src/pages/RideDetail.tsx b/src/pages/RideDetail.tsx
index 06cd2bae..acfe41d2 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-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">
+        <div className="max-w-4xl mx-auto mb-8 px-4">
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
           {ride.max_speed_kmh && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -383,45 +383,60 @@ export default function RideDetail() {
 
 
         {/* Main Content */}
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="specs">Specifications</TabsTrigger>
-            <TabsTrigger value="reviews">Reviews</TabsTrigger>
-            <TabsTrigger value="photos">Photos</TabsTrigger>
-            <TabsTrigger value="history">History</TabsTrigger>
-          </TabsList>
+        <div className="max-w-7xl mx-auto px-4 lg:px-6">
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="specs">Specifications</TabsTrigger>
+              <TabsTrigger value="reviews">Reviews</TabsTrigger>
+              <TabsTrigger value="photos">Photos</TabsTrigger>
+              <TabsTrigger value="history">History</TabsTrigger>
+            </TabsList>
 
-          <TabsContent value="overview" className="mt-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 className="max-w-prose mx-auto lg:mx-0">
-                    <CardHeader>
-                      <CardTitle>About {ride.name}</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                      <p className="text-muted-foreground leading-relaxed">
-                        {ride.description}
-                      </p>
-                    </CardContent>
-                  </Card>
-                )}
+            <TabsContent value="overview" className="mt-6">
+              <div className="grid lg:grid-cols-[2fr,1fr] xl:grid-cols-[1.5fr,1fr] gap-6">
+                {/* Left column - main content */}
+                <div className="space-y-6">
+                  {/* Description */}
+                  {ride.description && (
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>About {ride.name}</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-muted-foreground leading-relaxed text-base">
+                          {ride.description}
+                        </p>
+                      </CardContent>
+                    </Card>
+                  )}
 
-                {ride.name_history && ride.name_history.length > 0 && (
-                  <FormerNames nameHistory={ride.name_history} currentName={ride.name} />
-                )}
-              </div>
+                  {ride.name_history && ride.name_history.length > 0 && (
+                    <FormerNames nameHistory={ride.name_history} currentName={ride.name} />
+                  )}
 
-              {/* Sidebar - single column on desktop */}
-              <div className="space-y-6 lg:row-span-2">
-                <RatingDistribution 
-                  rideId={ride.id}
-                  totalReviews={ride.review_count}
-                  averageRating={ride.average_rating}
-                />
+                  {/* Similar Rides in left column */}
+                  <SimilarRides 
+                    currentRideId={ride.id}
+                    parkId={(ride as any).currentParkId}
+                    parkSlug={parkSlug || ''}
+                    category={ride.category}
+                  />
+
+                  {/* Recent Photos in left column */}
+                  <RecentPhotosPreview 
+                    rideId={ride.id}
+                    onViewAll={() => setActiveTab("photos")}
+                  />
+                </div>
+
+                {/* Right sidebar - sticky on desktop */}
+                <div className="space-y-6 lg:sticky lg:top-6 lg:self-start">
+                  <RatingDistribution 
+                    rideId={ride.id}
+                    totalReviews={ride.review_count}
+                    averageRating={ride.average_rating}
+                  />
                 {/* Ride Information */}
                 <Card>
                   <CardHeader>
@@ -530,32 +545,18 @@ 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>
 
           <TabsContent value="specs" className="mt-6">
-            <div className="grid md:grid-cols-2 gap-6">
+            <div className="max-w-5xl mx-auto">
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
               {/* Performance Stats */}
               <Card>
                 <CardHeader>
                   <CardTitle>Performance</CardTitle>
                 </CardHeader>
-                <CardContent className="space-y-4">
+                <CardContent className="space-y-3">
                   {ride.max_speed_kmh && (
                     <div className="flex justify-between">
                       <span>Maximum Speed</span>
@@ -614,7 +615,7 @@ export default function RideDetail() {
                 <CardHeader>
                   <CardTitle>Operational Details</CardTitle>
                 </CardHeader>
-                <CardContent className="space-y-4">
+                <CardContent className="space-y-3">
                   {ride.capacity_per_hour && (
                     <div className="flex justify-between">
                       <span>Capacity</span>
@@ -644,6 +645,7 @@ export default function RideDetail() {
                 </CardContent>
               </Card>
             </div>
+            </div>
           </TabsContent>
 
           <TabsContent value="reviews" className="mt-6">
@@ -710,6 +712,7 @@ export default function RideDetail() {
             </Tabs>
           </TabsContent>
         </Tabs>
+        </div>
 
         {/* Edit Ride Modal */}
         <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>