Fix grid and filter sizing

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

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

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

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

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} 

src/components/parks/ParkSortOptions.tsx

@@ -26,12 +26,12 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
   };
 
   return (
-    <div className="flex gap-2 w-full">
+    <div className="flex gap-2 flex-1">
       <Select 
         value={sort.field} 
         onValueChange={(field) => onSortChange({ ...sort, field })}
       >
-        <SelectTrigger className="flex-1 sm:w-48 bg-muted/50 border-border/50">
+        <SelectTrigger className="flex-1 bg-muted/50 border-border/50">
           <ArrowUpDown className="w-4 h-4 mr-2" />
           <SelectValue />
         </SelectTrigger>

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}

src/pages/Designers.tsx

@@ -167,7 +167,7 @@ export default function Designers() {
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
-                className="gap-2"
+                className="gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -176,6 +176,8 @@ export default function Designers() {
             </div>
           </div>
           
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
             <Collapsible open={showFilters} onOpenChange={setShowFilters}>
               <CollapsibleContent>
                 <Card className="mt-4">
@@ -186,10 +188,25 @@ export default function Designers() {
               </CollapsibleContent>
             </Collapsible>
           </div>
+        </div>
 
-        {/* Companies Grid */}
+        {/* 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-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
+            <div className="sticky top-24">
+              <Card>
+                <CardContent className="pt-6">
+                  <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
+                </CardContent>
+              </Card>
+            </div>
+          </aside>
+
+          {/* Results Area */}
+          <div className="flex-1 min-w-0">
             {filteredCompanies.length > 0 ? (
-          <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-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                 {filteredCompanies.map((company) => (
                   <DesignerCard key={company.id} company={company} />
                 ))}
@@ -203,6 +220,8 @@ export default function Designers() {
                 </p>
               </div>
             )}
+          </div>
+        </div>
       </main>
       <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
         <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">

src/pages/Manufacturers.tsx

@@ -180,7 +180,7 @@ export default function Manufacturers() {
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
-                className="gap-2"
+                className="gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -189,6 +189,8 @@ export default function Manufacturers() {
             </div>
           </div>
           
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
             <Collapsible open={showFilters} onOpenChange={setShowFilters}>
               <CollapsibleContent>
                 <Card className="mt-4">
@@ -199,10 +201,25 @@ export default function Manufacturers() {
               </CollapsibleContent>
             </Collapsible>
           </div>
+        </div>
 
-        {/* Companies Grid */}
+        {/* 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-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
+            <div className="sticky top-24">
+              <Card>
+                <CardContent className="pt-6">
+                  <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
+                </CardContent>
+              </Card>
+            </div>
+          </aside>
+
+          {/* Results Area */}
+          <div className="flex-1 min-w-0">
             {filteredCompanies.length > 0 ? (
-          <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-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                 {filteredCompanies.map((company) => (
                   <ManufacturerCard key={company.id} company={company} />
                 ))}
@@ -216,6 +233,8 @@ export default function Manufacturers() {
                 </p>
               </div>
             )}
+          </div>
+        </div>
       </main>
 
       {/* Create Modal */}

src/pages/Operators.tsx

@@ -238,7 +238,7 @@ const Operators = () => {
               <Button 
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)} 
-                className="gap-2"
+                className="gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -247,6 +247,8 @@ const Operators = () => {
             </div>
           </div>
           
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
             <Collapsible open={showFilters} onOpenChange={setShowFilters}>
               <CollapsibleContent>
                 <Card className="mt-4">
@@ -257,8 +259,23 @@ const Operators = () => {
               </CollapsibleContent>
             </Collapsible>
           </div>
+        </div>
 
+        {/* 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-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
+            <div className="sticky top-24">
+              <Card>
+                <CardContent className="pt-6">
+                  <OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
+                </CardContent>
+              </Card>
+            </div>
+          </aside>
 
+          {/* Results Area */}
+          <div className="flex-1 min-w-0">
             {/* Loading State */}
             {isLoading && (
               <div className="text-center py-12">
@@ -268,8 +285,8 @@ const Operators = () => {
             )}
 
             {/* Operators Grid */}
-        {!isLoading && filteredAndSortedOperators && (
+            {!isLoading && filteredAndSortedOperators && filteredAndSortedOperators.length > 0 && (
-          <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-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                 {filteredAndSortedOperators.map((operator) => (
                   <OperatorCard key={operator.id} company={operator} />
                 ))}
@@ -289,6 +306,8 @@ const Operators = () => {
                 </p>
               </div>
             )}
+          </div>
+        </div>
 
         {/* Create Modal */}
         <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>

src/pages/Parks.tsx

@@ -402,18 +402,16 @@ export default function Parks() {
               />
             </div>
             
-            <div className="flex gap-2 w-full lg:w-auto">
+            <div className="flex gap-2 flex-1">
-              <div className="flex-1 sm:flex-none">
               <ParkSortOptions 
                 sort={sort}
                 onSortChange={setSort}
               />
-              </div>
               
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
-                className="shrink-0 gap-2"
+                className="shrink-0 gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -425,7 +423,7 @@ export default function Parks() {
                 )}
               </Button>
 
-              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="flex-1 sm:flex-none hidden md:inline-flex">
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
                 <TabsList>
                   <TabsTrigger value="grid">
                     <Grid3X3 className="w-4 h-4" />
@@ -438,7 +436,8 @@ export default function Parks() {
             </div>
           </div>
 
-          {/* Advanced Filters Panel */}
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
             <Collapsible open={showFilters} onOpenChange={setShowFilters}>
               <CollapsibleContent>
                 <Card>
@@ -453,8 +452,27 @@ export default function Parks() {
               </CollapsibleContent>
             </Collapsible>
           </div>
+        </div>
 
-        {/* Results */}
+        {/* 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-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
+            <div className="sticky top-24">
+              <Card>
+                <CardContent className="pt-6">
+                  <ParkFilters 
+                    filters={filters}
+                    onFiltersChange={setFilters}
+                    parks={parks}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          </aside>
+
+          {/* Results Area */}
+          <div className="flex-1 min-w-0">
             {filteredAndSortedParks.length > 0 ? (
               <div>
                 {viewMode === 'grid' ? (
@@ -480,6 +498,8 @@ export default function Parks() {
                 </Button>
               </div>
             )}
+          </div>
+        </div>
 
         {/* Add Park Modal */}
         <Dialog open={isAddParkModalOpen} onOpenChange={setIsAddParkModalOpen}>

src/pages/Rides.tsx

@@ -187,7 +187,7 @@ export default function Rides() {
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
-                className="gap-2"
+                className="gap-2 lg:hidden"
               >
                 <Filter className="w-4 h-4" />
                 <span className="hidden sm:inline">Filters</span>
@@ -196,6 +196,8 @@ export default function Rides() {
             </div>
           </div>
 
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
             <Collapsible open={showFilters} onOpenChange={setShowFilters}>
               <CollapsibleContent>
                 <Card>
@@ -206,10 +208,25 @@ export default function Rides() {
               </CollapsibleContent>
             </Collapsible>
           </div>
+        </div>
 
-        {/* Rides Grid */}
+        {/* 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-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
+            <div className="sticky top-24">
+              <Card>
+                <CardContent className="pt-6">
+                  <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
+                </CardContent>
+              </Card>
+            </div>
+          </aside>
+
+          {/* Results Area */}
+          <div className="flex-1 min-w-0">
             {filteredRides.length > 0 ? (
-          <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-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                 {filteredRides.map((ride) => (
                   <RideCard key={ride.id} ride={ride} showParkName={true} />
                 ))}
@@ -223,6 +240,8 @@ export default function Rides() {
                 </p>
               </div>
             )}
+          </div>
+        </div>
 
         {/* Create Modal */}
         <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>