From ef312618f5b23c7bf9500ddd0c0d0903471be182 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 28 Oct 2025 15:33:49 +0000
Subject: [PATCH] Fix grid and filter sizing

---
 src/components/designers/DesignerFilters.tsx         |  4 ++--
 src/components/manufacturers/ManufacturerFilters.tsx |  4 ++--
 src/components/operators/OperatorFilters.tsx         |  4 ++--
 src/components/parks/ParkFilters.tsx                 |  8 ++++----
 src/components/parks/ParkGridView.tsx                |  2 +-
 src/components/rides/RideFilters.tsx                 | 12 ++++++------
 src/pages/Designers.tsx                              |  2 +-
 src/pages/Manufacturers.tsx                          |  2 +-
 src/pages/Operators.tsx                              |  2 +-
 src/pages/Parks.tsx                                  |  2 +-
 src/pages/Rides.tsx                                  |  2 +-
 11 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/designers/DesignerFilters.tsx b/src/components/designers/DesignerFilters.tsx
index f19a8eba..6fa43166 100644
--- a/src/components/designers/DesignerFilters.tsx
+++ b/src/components/designers/DesignerFilters.tsx
@@ -85,7 +85,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
       </div>
 
       <FilterSection title="Basic Filters">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <div className="space-y-2">
             <Label>Entity Type</Label>
             <Select
@@ -126,7 +126,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
       <Separator />
 
       <FilterSection title="Statistics">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-4">
           <FilterRangeSlider
             label="Rating"
             value={[filters.minRating, filters.maxRating]}
diff --git a/src/components/manufacturers/ManufacturerFilters.tsx b/src/components/manufacturers/ManufacturerFilters.tsx
index 637a4a55..94b042c4 100644
--- a/src/components/manufacturers/ManufacturerFilters.tsx
+++ b/src/components/manufacturers/ManufacturerFilters.tsx
@@ -85,7 +85,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
       </div>
 
       <FilterSection title="Basic Filters">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <div className="space-y-2">
             <Label>Entity Type</Label>
             <Select
@@ -126,7 +126,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
       <Separator />
 
       <FilterSection title="Statistics">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-4">
           <FilterRangeSlider
             label="Rating"
             value={[filters.minRating, filters.maxRating]}
diff --git a/src/components/operators/OperatorFilters.tsx b/src/components/operators/OperatorFilters.tsx
index c34e8470..8e2b2d4f 100644
--- a/src/components/operators/OperatorFilters.tsx
+++ b/src/components/operators/OperatorFilters.tsx
@@ -88,7 +88,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
       </div>
 
       <FilterSection title="Basic Filters">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FilterMultiSelectCombobox
             label="Headquarters Country"
             options={countryOptions}
@@ -111,7 +111,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
       <Separator />
 
       <FilterSection title="Statistics">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-4">
           <FilterRangeSlider
             label="Rating"
             value={[filters.minRating, filters.maxRating]}
diff --git a/src/components/parks/ParkFilters.tsx b/src/components/parks/ParkFilters.tsx
index 21301148..3323e5a4 100644
--- a/src/components/parks/ParkFilters.tsx
+++ b/src/components/parks/ParkFilters.tsx
@@ -144,7 +144,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
       </div>
 
       <FilterSection title="Basic Filters">
-        <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 gap-4">
           {/* Park Type */}
           <div className="space-y-2">
             <Label>Park Type</Label>
@@ -227,7 +227,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
       <Separator />
 
       <FilterSection title="Operators & Owners">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FilterMultiSelectCombobox
             label="Operators"
             options={operatorOptions}
@@ -248,7 +248,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
       <Separator />
 
       <FilterSection title="Opening Dates">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FilterDateRangePicker
             label="Opening Year"
             fromDate={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : null}
@@ -270,7 +270,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
       <Separator />
 
       <FilterSection title="Statistics">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-4">
           <FilterRangeSlider
             label="Rating"
             value={[filters.minRating, filters.maxRating]}
diff --git a/src/components/parks/ParkGridView.tsx b/src/components/parks/ParkGridView.tsx
index fdbc1d27..6d33c439 100644
--- a/src/components/parks/ParkGridView.tsx
+++ b/src/components/parks/ParkGridView.tsx
@@ -7,7 +7,7 @@ interface ParkGridViewProps {
 
 export function ParkGridView({ parks }: ParkGridViewProps) {
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
       {parks.map((park) => (
         <ParkCard 
           key={park.id} 
diff --git a/src/components/rides/RideFilters.tsx b/src/components/rides/RideFilters.tsx
index 70556b96..516cb0ca 100644
--- a/src/components/rides/RideFilters.tsx
+++ b/src/components/rides/RideFilters.tsx
@@ -218,7 +218,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
 
       {/* Basic Filters */}
       <FilterSection title="Basic Filters">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FilterMultiSelectCombobox
             label="Categories"
             options={categoryOptions}
@@ -252,7 +252,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
 
       {/* Geographic Filters */}
       <FilterSection title="Location">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FilterMultiSelectCombobox
             label="Countries"
             options={countryOptions}
@@ -281,7 +281,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
 
       {/* Relationship Filters */}
       <FilterSection title="Parks & Companies">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FilterMultiSelectCombobox
             label="Parks"
             options={parkOptions}
@@ -310,7 +310,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
 
       {/* Coaster-Specific Filters */}
       <FilterSection title="Coaster Details">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FilterMultiSelectCombobox
             label="Coaster Type"
             options={coasterTypeOptions}
@@ -346,7 +346,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
 
       {/* Numeric Range Filters */}
       <FilterSection title="Statistics">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-4">
           <FilterRangeSlider
             label="Speed"
             value={[filters.minSpeed, filters.maxSpeed]}
@@ -389,7 +389,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
 
       {/* Date Filters */}
       <FilterSection title="Dates">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4">
           <FilterDateRangePicker
             label="Opening Date"
             fromDate={filters.openingDateFrom}
diff --git a/src/pages/Designers.tsx b/src/pages/Designers.tsx
index 23a5cbd1..a0775da4 100644
--- a/src/pages/Designers.tsx
+++ b/src/pages/Designers.tsx
@@ -193,7 +193,7 @@ export default function Designers() {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
+          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
             <div className="sticky top-24">
               <Card>
                 <CardContent className="pt-6">
diff --git a/src/pages/Manufacturers.tsx b/src/pages/Manufacturers.tsx
index 3df94d71..062e547d 100644
--- a/src/pages/Manufacturers.tsx
+++ b/src/pages/Manufacturers.tsx
@@ -206,7 +206,7 @@ export default function Manufacturers() {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
+          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
             <div className="sticky top-24">
               <Card>
                 <CardContent className="pt-6">
diff --git a/src/pages/Operators.tsx b/src/pages/Operators.tsx
index 8aaa7bdc..2471ec09 100644
--- a/src/pages/Operators.tsx
+++ b/src/pages/Operators.tsx
@@ -264,7 +264,7 @@ const Operators = () => {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
+          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
             <div className="sticky top-24">
               <Card>
                 <CardContent className="pt-6">
diff --git a/src/pages/Parks.tsx b/src/pages/Parks.tsx
index 15cb3539..244e2fdc 100644
--- a/src/pages/Parks.tsx
+++ b/src/pages/Parks.tsx
@@ -457,7 +457,7 @@ export default function Parks() {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
+          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
             <div className="sticky top-24">
               <Card>
                 <CardContent className="pt-6">
diff --git a/src/pages/Rides.tsx b/src/pages/Rides.tsx
index 11e6fa24..3ea7ec8e 100644
--- a/src/pages/Rides.tsx
+++ b/src/pages/Rides.tsx
@@ -213,7 +213,7 @@ export default function Rides() {
         {/* Main Content Area with Sidebar */}
         <div className="flex flex-col lg:flex-row gap-6">
           {/* Desktop Filter Sidebar */}
-          <aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0">
+          <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
             <div className="sticky top-24">
               <Card>
                 <CardContent className="pt-6">