Reverted to commit cb1ef6c177

src/components/rides/CoasterStatistics.tsx

@@ -64,7 +64,7 @@ export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
               <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
                 {category}
               </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                 {stats
                   .sort((a, b) => a.display_order - b.display_order)
                   .map((stat) => (

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 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
           {photos.map((photo) => (
             <div
               key={photo.id}

src/components/rides/RideCard.tsx

@@ -10,10 +10,9 @@ interface RideCardProps {
   showParkName?: boolean;
   className?: string;
   parkSlug?: string;
-  compact?: boolean;
 }
 
-export function RideCard({ ride, showParkName = true, className, parkSlug, compact = false }: RideCardProps) {
+export function RideCard({ ride, showParkName = true, className, parkSlug }: RideCardProps) {
   const navigate = useNavigate();
 
   const handleRideClick = () => {
@@ -50,12 +49,12 @@ export function RideCard({ ride, showParkName = true, className, parkSlug, compa
 
   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] ${compact ? 'max-w-sm' : ''} ${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] ${className}`}
       onClick={handleRideClick}
     >
       <div className="relative overflow-hidden">
         {/* Image/Icon Section */}
-        <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'}`}>
+        <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
           {(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)} 
@@ -79,7 +78,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug, compa
           </Badge>
         </div>
 
-        <CardContent className={`space-y-3 ${compact ? 'p-3' : 'p-4'}`}>
+        <CardContent className="p-4 space-y-3">
           {/* Header */}
           <div className="space-y-1">
             <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">

src/components/rides/RideHighlights.tsx

@@ -62,7 +62,7 @@ export function RideHighlights({ ride }: RideHighlightsProps) {
         <CardTitle>Ride Highlights</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="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>

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 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {rides.map((ride) => (
             <RideCard 
               key={ride.id} 

src/components/rides/TechnicalSpecifications.tsx

@@ -71,7 +71,7 @@ export const TechnicalSpecifications = ({ specifications }: TechnicalSpecificati
               <h3 className="text-sm font-semibold mb-3 text-muted-foreground uppercase tracking-wide">
                 {category}
               </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                 {specs
                   .sort((a, b) => a.display_order - b.display_order)
                   .map((spec) => (

src/pages/DesignerDetail.tsx

@@ -200,7 +200,7 @@ export default function DesignerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
           {designer.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">

src/pages/ManufacturerDetail.tsx

@@ -202,7 +202,7 @@ export default function ManufacturerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
           {manufacturer.founded_year && (
             <Card>
               <CardContent className="p-3 md:p-4 text-center">

src/pages/OperatorDetail.tsx

@@ -229,7 +229,7 @@ export default function OperatorDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
           {operator.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -292,13 +292,13 @@ export default function OperatorDetail() {
                 </div>
                 
                 {parksLoading ? (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                     {[1, 2, 3].map((i) => (
                       <div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
                     ))}
                   </div>
                 ) : parks.length > 0 ? (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                     {parks.map((park) => (
                       <ParkCard key={park.id} park={park} />
                     ))}

src/pages/ParkDetail.tsx

@@ -282,11 +282,11 @@ export default function ParkDetail() {
         </div>
 
         {/* Quick Stats */}
-        <div className="relative mb-12 max-w-7xl mx-auto">
+        <div className="relative mb-12">
           {/* Background decorative elements */}
           <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5 rounded-3xl blur-xl"></div>
           
-          <div className="relative grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-md">
+          <div className="relative grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-md">
             {/* Total Rides */}
             <div className="group relative overflow-hidden">
               <Card className="h-full border-0 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent hover:shadow-lg hover:shadow-primary/15 transition-all duration-300 hover:scale-[1.02]">
@@ -358,66 +358,62 @@ export default function ParkDetail() {
         </div>
 
         {/* Main Content */}
-        <div className="max-w-7xl mx-auto px-4 lg:px-6">
+        <Tabs defaultValue="overview" className="w-full">
-          <Tabs defaultValue="overview" className="w-full">
+          <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
-            <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
-              <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
-              <TabsTrigger value="rides">Rides ({rides.length})</TabsTrigger>
+            <TabsTrigger value="reviews">Reviews</TabsTrigger>
-              <TabsTrigger value="reviews">Reviews</TabsTrigger>
+            <TabsTrigger value="photos">Photos</TabsTrigger>
-              <TabsTrigger value="photos">Photos</TabsTrigger>
+            <TabsTrigger value="history">History</TabsTrigger>
-              <TabsTrigger value="history">History</TabsTrigger>
+          </TabsList>
-            </TabsList>
 
-            <TabsContent value="overview" className="mt-6">
+          <TabsContent value="overview" className="mt-6">
-              <div className="grid lg:grid-cols-[2fr,1fr] xl:grid-cols-[1.5fr,1fr] gap-6">
+            <div className="grid lg:grid-cols-3 gap-6">
-                {/* Left column - main content */}
+              <div className="lg:col-span-2 space-y-6">
-                <div className="space-y-6">
+                {/* Description */}
-                  {/* Description */}
+                {park.description && <Card>
-                  {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>Featured Rides</CardTitle>
+                      <CardTitle>About {park.name}</CardTitle>
                     </CardHeader>
                     <CardContent>
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <p className="text-muted-foreground leading-relaxed">
-                        {rides.slice(0, 6).map(ride => (
+                        {park.description}
-                          <RideCard 
+                      </p>
-                            key={ride.id} 
-                            ride={ride} 
-                            showParkName={false}
-                            parkSlug={park.slug}
-                            className="h-full"
-                            compact={true}
-                          />
-                        ))}
-                      </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>
+                  </Card>}
-                </div>
 
-                {/* Right sidebar - sticky on desktop */}
+                {/* Featured Rides */}
-                <div className="space-y-6 lg:sticky lg:top-6 lg:self-start">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Featured Rides</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="grid sm:grid-cols-2 gap-4">
+                      {rides.slice(0, 4).map(ride => (
+                        <RideCard 
+                          key={ride.id} 
+                          ride={ride} 
+                          showParkName={false}
+                          parkSlug={park.slug}
+                          className="h-full"
+                        />
+                      ))}
+                    </div>
+                    {rides.length > 4 && (
+                      <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>
+
+              <div className="space-y-6">
                 {/* Park Information */}
                 <Card>
                   <CardHeader>
@@ -633,7 +629,6 @@ export default function ParkDetail() {
             </Tabs>
           </TabsContent>
         </Tabs>
-        </div>
 
         {/* Add Ride Modal */}
         <Dialog open={isAddRideModalOpen} onOpenChange={setIsAddRideModalOpen}>

src/pages/PropertyOwnerDetail.tsx

@@ -229,7 +229,7 @@ export default function PropertyOwnerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8 max-w-5xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
           {owner.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -292,13 +292,13 @@ export default function PropertyOwnerDetail() {
                 </div>
                 
                 {parksLoading ? (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                     {[1, 2, 3].map((i) => (
                       <div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
                     ))}
                   </div>
                 ) : parks.length > 0 ? (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                     {parks.map((park) => (
                       <ParkCard key={park.id} park={park} />
                     ))}

src/pages/RideDetail.tsx

@@ -290,8 +290,7 @@ export default function RideDetail() {
         </div>
 
         {/* Quick Stats */}
-        <div className="max-w-4xl mx-auto mb-8 px-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
-          <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">
@@ -379,64 +378,58 @@ export default function RideDetail() {
             </Card>
           )}
         </div>
-        </div>
 
 
         {/* Main Content */}
-        <div className="max-w-7xl mx-auto px-4 lg:px-6">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
-            <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
-              <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="specs">Specifications</TabsTrigger>
-              <TabsTrigger value="specs">Specifications</TabsTrigger>
+            <TabsTrigger value="reviews">Reviews</TabsTrigger>
-              <TabsTrigger value="reviews">Reviews</TabsTrigger>
+            <TabsTrigger value="photos">Photos</TabsTrigger>
-              <TabsTrigger value="photos">Photos</TabsTrigger>
+            <TabsTrigger value="history">History</TabsTrigger>
-              <TabsTrigger value="history">History</TabsTrigger>
+          </TabsList>
-            </TabsList>
 
-            <TabsContent value="overview" className="mt-6">
+          <TabsContent value="overview" className="mt-6">
-              <div className="grid lg:grid-cols-[2fr,1fr] xl:grid-cols-[1.5fr,1fr] gap-6">
+            <div className="grid lg:grid-cols-3 gap-6">
-                {/* Left column - main content */}
+              <div className="lg:col-span-2 space-y-6">
-                <div className="space-y-6">
+                {/* Description */}
-                  {/* Description */}
+                {ride.description && (
-                  {ride.description && (
+                  <Card>
-                    <Card>
+                    <CardHeader>
-                      <CardHeader>
+                      <CardTitle>About {ride.name}</CardTitle>
-                        <CardTitle>About {ride.name}</CardTitle>
+                    </CardHeader>
-                      </CardHeader>
+                    <CardContent>
-                      <CardContent>
+                      <p className="text-muted-foreground leading-relaxed">
-                        <p className="text-muted-foreground leading-relaxed text-base">
+                        {ride.description}
-                          {ride.description}
+                      </p>
-                        </p>
+                    </CardContent>
-                      </CardContent>
+                  </Card>
-                    </Card>
+                )}
-                  )}
 
-                  {ride.name_history && ride.name_history.length > 0 && (
+                {ride.name_history && ride.name_history.length > 0 && (
-                    <FormerNames nameHistory={ride.name_history} currentName={ride.name} />
+                  <FormerNames nameHistory={ride.name_history} currentName={ride.name} />
-                  )}
+                )}
 
-                  {/* Similar Rides in left column */}
+                <SimilarRides 
-                  <SimilarRides 
+                  currentRideId={ride.id}
-                    currentRideId={ride.id}
+                  parkId={(ride as any).currentParkId}
-                    parkId={(ride as any).currentParkId}
+                  parkSlug={parkSlug || ''}
-                    parkSlug={parkSlug || ''}
+                  category={ride.category}
-                    category={ride.category}
+                />
-                  />
 
-                  {/* Recent Photos in left column */}
+                <RecentPhotosPreview 
-                  <RecentPhotosPreview 
+                  rideId={ride.id}
-                    rideId={ride.id}
+                  onViewAll={() => setActiveTab("photos")}
-                    onViewAll={() => setActiveTab("photos")}
+                />
-                  />
+              </div>
-                </div>
 
-                {/* Right sidebar - sticky on desktop */}
+              <div className="space-y-6">
-                <div className="space-y-6 lg:sticky lg:top-6 lg:self-start">
+                <RatingDistribution 
-                  <RatingDistribution 
+                  rideId={ride.id}
-                    rideId={ride.id}
+                  totalReviews={ride.review_count}
-                    totalReviews={ride.review_count}
+                  averageRating={ride.average_rating}
-                    averageRating={ride.average_rating}
+                />
-                  />
                 {/* Ride Information */}
                 <Card>
                   <CardHeader>
@@ -549,14 +542,13 @@ export default function RideDetail() {
           </TabsContent>
 
           <TabsContent value="specs" className="mt-6">
-            <div className="max-w-5xl mx-auto">
+            <div className="grid md:grid-cols-2 gap-6">
-              <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-3">
+                <CardContent className="space-y-4">
                   {ride.max_speed_kmh && (
                     <div className="flex justify-between">
                       <span>Maximum Speed</span>
@@ -615,7 +607,7 @@ export default function RideDetail() {
                 <CardHeader>
                   <CardTitle>Operational Details</CardTitle>
                 </CardHeader>
-                <CardContent className="space-y-3">
+                <CardContent className="space-y-4">
                   {ride.capacity_per_hour && (
                     <div className="flex justify-between">
                       <span>Capacity</span>
@@ -645,7 +637,6 @@ export default function RideDetail() {
                 </CardContent>
               </Card>
             </div>
-            </div>
           </TabsContent>
 
           <TabsContent value="reviews" className="mt-6">
@@ -712,7 +703,6 @@ export default function RideDetail() {
             </Tabs>
           </TabsContent>
         </Tabs>
-        </div>
 
         {/* Edit Ride Modal */}
         <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>