From bc8cb181723a828cbdd633fd9915e015853d15fe 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:15:36 +0000
Subject: [PATCH] Refactor: Optimize desktop max-widths

---
 src/components/homepage/ContentTabs.tsx       | 24 ++++++++++++++-----
 src/components/rides/CoasterStatistics.tsx    |  2 +-
 .../rides/TechnicalSpecifications.tsx         |  2 +-
 src/pages/DesignerDetail.tsx                  |  4 ++--
 src/pages/ManufacturerDetail.tsx              |  4 ++--
 src/pages/OperatorDetail.tsx                  |  6 ++---
 src/pages/ParkDetail.tsx                      |  6 ++---
 src/pages/Parks.tsx                           |  2 +-
 src/pages/PropertyOwnerDetail.tsx             |  6 ++---
 src/pages/RideDetail.tsx                      |  6 +++--
 src/pages/Rides.tsx                           |  4 ++--
 11 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/components/homepage/ContentTabs.tsx b/src/components/homepage/ContentTabs.tsx
index 4d64a1fd..f8e63e94 100644
--- a/src/components/homepage/ContentTabs.tsx
+++ b/src/components/homepage/ContentTabs.tsx
@@ -125,10 +125,12 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Most Popular Parks</h2>
               <p className="text-muted-foreground">Highest rated theme parks worldwide</p>
             </div>
-            <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="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {popularParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
+              </div>
             </div>
           </TabsContent>
 
@@ -137,10 +139,12 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
               <p className="text-muted-foreground">Most reviewed parks this month</p>
             </div>
-            <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="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {trendingParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
+              </div>
             </div>
           </TabsContent>
 
@@ -149,10 +153,12 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Most Popular Rides</h2>
               <p className="text-muted-foreground">Highest rated attractions worldwide</p>
             </div>
-            <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="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {popularRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}
+              </div>
             </div>
           </TabsContent>
 
@@ -161,10 +167,12 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
               <p className="text-muted-foreground">Most talked about attractions</p>
             </div>
-            <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="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {trendingRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}
+              </div>
             </div>
           </TabsContent>
 
@@ -173,10 +181,12 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2>
               <p className="text-muted-foreground">Latest parks added to our database</p>
             </div>
-            <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="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {recentParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
+              </div>
             </div>
           </TabsContent>
 
@@ -185,10 +195,12 @@ export function ContentTabs() {
               <h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2>
               <p className="text-muted-foreground">Latest attractions added to our database</p>
             </div>
-            <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="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
               {recentRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}
+              </div>
             </div>
           </TabsContent>
         </Tabs>
diff --git a/src/components/rides/CoasterStatistics.tsx b/src/components/rides/CoasterStatistics.tsx
index f50dbd77..786e40a7 100644
--- a/src/components/rides/CoasterStatistics.tsx
+++ b/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 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-3 max-w-4xl mx-auto">
                 {stats
                   .sort((a, b) => a.display_order - b.display_order)
                   .map((stat) => (
diff --git a/src/components/rides/TechnicalSpecifications.tsx b/src/components/rides/TechnicalSpecifications.tsx
index 860806bb..d4f7fd80 100644
--- a/src/components/rides/TechnicalSpecifications.tsx
+++ b/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 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-3 max-w-4xl mx-auto">
                 {specs
                   .sort((a, b) => a.display_order - b.display_order)
                   .map((spec) => (
diff --git a/src/pages/DesignerDetail.tsx b/src/pages/DesignerDetail.tsx
index 4ca2cda7..58a50156 100644
--- a/src/pages/DesignerDetail.tsx
+++ b/src/pages/DesignerDetail.tsx
@@ -111,7 +111,7 @@ export default function DesignerDetail() {
     <div className="min-h-screen bg-background">
       <Header />
       
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/designers')}>
@@ -200,7 +200,7 @@ export default function DesignerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
           {designer.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">
diff --git a/src/pages/ManufacturerDetail.tsx b/src/pages/ManufacturerDetail.tsx
index 35b0dd12..aed1d9a5 100644
--- a/src/pages/ManufacturerDetail.tsx
+++ b/src/pages/ManufacturerDetail.tsx
@@ -111,7 +111,7 @@ export default function ManufacturerDetail() {
     <div className="min-h-screen bg-background">
       <Header />
       
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/manufacturers')}>
@@ -202,7 +202,7 @@ export default function ManufacturerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
           {manufacturer.founded_year && (
             <Card>
               <CardContent className="p-3 md:p-4 text-center">
diff --git a/src/pages/OperatorDetail.tsx b/src/pages/OperatorDetail.tsx
index c9983ae8..02d26001 100644
--- a/src/pages/OperatorDetail.tsx
+++ b/src/pages/OperatorDetail.tsx
@@ -140,7 +140,7 @@ export default function OperatorDetail() {
     <div className="min-h-screen bg-background">
       <Header />
       
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/operators')}>
@@ -229,7 +229,7 @@ export default function OperatorDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
           {operator.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -298,7 +298,7 @@ export default function OperatorDetail() {
                     ))}
                   </div>
                 ) : parks.length > 0 ? (
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                     {parks.map((park) => (
                       <ParkCard key={park.id} park={park} />
                     ))}
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 24c06755..d4efd5f6 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -204,7 +204,7 @@ export default function ParkDetail() {
   return <div className="min-h-screen bg-background">
       <Header />
       
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/parks')}>
@@ -282,7 +282,7 @@ export default function ParkDetail() {
         </div>
 
         {/* Quick Stats */}
-        <div className="relative mb-12">
+        <div className="relative mb-12 max-w-6xl mx-auto">
           {/* 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>
           
@@ -388,7 +388,7 @@ export default function ParkDetail() {
                     <CardTitle>Featured Rides</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <div className="grid sm:grid-cols-2 gap-4">
+                    <div className="grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
                       {rides.slice(0, 4).map(ride => (
                         <RideCard 
                           key={ride.id} 
diff --git a/src/pages/Parks.tsx b/src/pages/Parks.tsx
index 84ae762e..aeccf60b 100644
--- a/src/pages/Parks.tsx
+++ b/src/pages/Parks.tsx
@@ -295,7 +295,7 @@ export default function Parks() {
     <div className="min-h-screen bg-background">
       <Header />
       
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Page Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
diff --git a/src/pages/PropertyOwnerDetail.tsx b/src/pages/PropertyOwnerDetail.tsx
index 3a8e860e..d3cdead8 100644
--- a/src/pages/PropertyOwnerDetail.tsx
+++ b/src/pages/PropertyOwnerDetail.tsx
@@ -140,7 +140,7 @@ export default function PropertyOwnerDetail() {
     <div className="min-h-screen bg-background">
       <Header />
       
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/owners')}>
@@ -229,7 +229,7 @@ export default function PropertyOwnerDetail() {
         </div>
 
         {/* Company Info */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
           {owner.founded_year && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -298,7 +298,7 @@ export default function PropertyOwnerDetail() {
                     ))}
                   </div>
                 ) : parks.length > 0 ? (
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                     {parks.map((park) => (
                       <ParkCard key={park.id} park={park} />
                     ))}
diff --git a/src/pages/RideDetail.tsx b/src/pages/RideDetail.tsx
index 16d67a82..fa2be17f 100644
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -192,7 +192,7 @@ export default function RideDetail() {
     <div className="min-h-screen bg-background">
       <Header />
       
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button 
@@ -290,7 +290,8 @@ export default function RideDetail() {
         </div>
 
         {/* Quick Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
+        <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">
           {ride.max_speed_kmh && (
             <Card>
               <CardContent className="p-4 text-center">
@@ -378,6 +379,7 @@ export default function RideDetail() {
             </Card>
           )}
         </div>
+        </div>
 
 
         {/* Main Content */}
diff --git a/src/pages/Rides.tsx b/src/pages/Rides.tsx
index f0622209..0ea9a9d6 100644
--- a/src/pages/Rides.tsx
+++ b/src/pages/Rides.tsx
@@ -148,7 +148,7 @@ export default function Rides() {
     <div className="min-h-screen bg-background">
       <Header />
       
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Page Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
@@ -246,7 +246,7 @@ export default function Rides() {
 
         {/* Rides Grid */}
         {filteredRides.length > 0 ? (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
             {filteredRides.map((ride) => (
               <RideCard key={ride.id} ride={ride} showParkName={true} />
             ))}