Fix desktop layout

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