Refactor: Implement unified responsive design

src/components/designers/DesignerFilters.tsx

@@ -84,7 +84,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
         </Button>
       </div>
 
-      <FilterSection>
+      <FilterSection title="Basic Filters">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div className="space-y-2">
             <Label>Entity Type</Label>

src/components/manufacturers/ManufacturerFilters.tsx

@@ -84,7 +84,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
         </Button>
       </div>
 
-      <FilterSection>
+      <FilterSection title="Basic Filters">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div className="space-y-2">
             <Label>Entity Type</Label>

src/components/operators/OperatorFilters.tsx

@@ -87,7 +87,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
         </Button>
       </div>
 
-      <FilterSection>
+      <FilterSection title="Basic Filters">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <FilterMultiSelectCombobox
             label="Headquarters Country"

src/components/parks/ParkFilters.tsx

@@ -143,8 +143,8 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
         </Button>
       </div>
 
-      <FilterSection>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+      <FilterSection title="Basic Filters">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
           {/* Park Type */}
           <div className="space-y-2">
             <Label>Park Type</Label>

src/components/rides/RideFilters.tsx

@@ -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-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <FilterMultiSelectCombobox
             label="Parks"
             options={parkOptions}

src/pages/Designers.tsx

@@ -138,33 +138,42 @@ export default function Designers() {
         </div>
 
         {/* Search and Filters */}
-        <div className="space-y-3 mb-6">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-            <Input
-              placeholder="Search designers..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10 h-11"
-            />
-          </div>
+        <div className="mb-6 space-y-4">
+          <div className="flex flex-col lg:flex-row gap-4">
+            <div className="flex-1">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+                <Input
+                  placeholder="Search designers..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 h-11"
+                />
+              </div>
+            </div>
             
-          <div className="flex gap-2">
-            <Select value={sortBy} onValueChange={setSortBy}>
-              <SelectTrigger className="w-[180px] h-10">
-                <SlidersHorizontal className="h-4 w-4 mr-2" />
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="name">Name A-Z</SelectItem>
-                <SelectItem value="founded">Founded (Newest)</SelectItem>
-              </SelectContent>
-            </Select>
-            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
-              <Filter className="w-4 h-4" />
-              Filters
-              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
-            </Button>
+            <div className="flex gap-2 w-full lg:w-auto">
+              <Select value={sortBy} onValueChange={setSortBy}>
+                <SelectTrigger className="w-[180px] h-10">
+                  <SlidersHorizontal className="h-4 w-4 mr-2" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectItem value="founded">Founded (Newest)</SelectItem>
+                </SelectContent>
+              </Select>
+              
+              <Button 
+                variant={showFilters ? "default" : "outline"}
+                onClick={() => setShowFilters(!showFilters)} 
+                className="gap-2"
+              >
+                <Filter className="w-4 h-4" />
+                <span className="hidden sm:inline">Filters</span>
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              </Button>
+            </div>
           </div>
           
           <Collapsible open={showFilters} onOpenChange={setShowFilters}>

src/pages/Manufacturers.tsx

@@ -151,33 +151,42 @@ export default function Manufacturers() {
         </div>
 
         {/* Search and Filters */}
-        <div className="space-y-3 mb-6">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-            <Input
-              placeholder="Search manufacturers..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10 h-11"
-            />
-          </div>
+        <div className="mb-6 space-y-4">
+          <div className="flex flex-col lg:flex-row gap-4">
+            <div className="flex-1">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+                <Input
+                  placeholder="Search manufacturers..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 h-11"
+                />
+              </div>
+            </div>
             
-          <div className="flex gap-2">
-            <Select value={sortBy} onValueChange={setSortBy}>
-              <SelectTrigger className="w-[180px] h-10">
-                <SlidersHorizontal className="h-4 w-4 mr-2" />
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="name">Name A-Z</SelectItem>
-                <SelectItem value="founded">Founded (Newest)</SelectItem>
-              </SelectContent>
-            </Select>
-            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
-              <Filter className="w-4 h-4" />
-              Filters
-              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
-            </Button>
+            <div className="flex gap-2 w-full lg:w-auto">
+              <Select value={sortBy} onValueChange={setSortBy}>
+                <SelectTrigger className="w-[180px] h-10">
+                  <SlidersHorizontal className="h-4 w-4 mr-2" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="name">Name A-Z</SelectItem>
+                  <SelectItem value="founded">Founded (Newest)</SelectItem>
+                </SelectContent>
+              </Select>
+              
+              <Button 
+                variant={showFilters ? "default" : "outline"}
+                onClick={() => setShowFilters(!showFilters)} 
+                className="gap-2"
+              >
+                <Filter className="w-4 h-4" />
+                <span className="hidden sm:inline">Filters</span>
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              </Button>
+            </div>
           </div>
           
           <Collapsible open={showFilters} onOpenChange={setShowFilters}>

src/pages/Operators.tsx

@@ -208,35 +208,43 @@ const Operators = () => {
         </div>
 
         {/* Search and Filters */}
-        <div className="space-y-3 mb-6">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-            <Input
-              placeholder="Search park operators..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10 h-11"
-            />
-          </div>
+        <div className="mb-6 space-y-4">
+          <div className="flex flex-col lg:flex-row gap-4">
+            <div className="flex-1">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+                <Input
+                  placeholder="Search park operators..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-10 h-11"
+                />
+              </div>
+            </div>
             
-          <div className="flex gap-2">
-            <Select value={sortBy} onValueChange={setSortBy}>
-              <SelectTrigger className="w-[180px] h-10">
-                <SelectValue placeholder="Sort by" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="name">Name</SelectItem>
-                <SelectItem value="rating">Rating</SelectItem>
-                <SelectItem value="founded">Founded Year</SelectItem>
-                <SelectItem value="reviews">Review Count</SelectItem>
-              </SelectContent>
-            </Select>
+            <div className="flex gap-2 w-full lg:w-auto">
+              <Select value={sortBy} onValueChange={setSortBy}>
+                <SelectTrigger className="w-[180px] h-10">
+                  <SelectValue placeholder="Sort by" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="name">Name</SelectItem>
+                  <SelectItem value="rating">Rating</SelectItem>
+                  <SelectItem value="founded">Founded Year</SelectItem>
+                  <SelectItem value="reviews">Review Count</SelectItem>
+                </SelectContent>
+              </Select>
 
-            <Button variant="outline" onClick={() => setShowFilters(!showFilters)} className="gap-2">
-              <Filter className="w-4 h-4" />
-              Filters
-              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
-            </Button>
+              <Button 
+                variant={showFilters ? "default" : "outline"}
+                onClick={() => setShowFilters(!showFilters)} 
+                className="gap-2"
+              >
+                <Filter className="w-4 h-4" />
+                <span className="hidden sm:inline">Filters</span>
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+              </Button>
+            </div>
           </div>
           
           <Collapsible open={showFilters} onOpenChange={setShowFilters}>

src/pages/Parks.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { Header } from '@/components/layout/Header';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Badge } from '@/components/ui/badge';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { 
@@ -412,12 +413,13 @@ export default function Parks() {
               <Button
                 variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
-                className="shrink-0"
+                className="shrink-0 gap-2"
               >
-                <Filter className="w-4 h-4 md:mr-2" />
-                <span className="hidden md:inline">Filters</span>
+                <Filter className="w-4 h-4" />
+                <span className="hidden sm:inline">Filters</span>
+                <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
                 {activeFilterCount > 0 && (
-                  <Badge variant="secondary" className="ml-2">
+                  <Badge variant="secondary" className="ml-1">
                     {activeFilterCount}
                   </Badge>
                 )}
@@ -437,17 +439,19 @@ export default function Parks() {
           </div>
 
           {/* Advanced Filters Panel */}
-          {showFilters && (
-            <Card>
-              <CardContent className="p-6">
-                <ParkFilters 
-                  filters={filters}
-                  onFiltersChange={setFilters}
-                  parks={parks}
-                />
-              </CardContent>
-            </Card>
-          )}
+          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+            <CollapsibleContent>
+              <Card>
+                <CardContent className="pt-6">
+                  <ParkFilters 
+                    filters={filters}
+                    onFiltersChange={setFilters}
+                    parks={parks}
+                  />
+                </CardContent>
+              </Card>
+            </CollapsibleContent>
+          </Collapsible>
         </div>
 
         {/* Results */}

src/pages/Rides.tsx

@@ -185,12 +185,12 @@ export default function Rides() {
               </Select>
               
               <Button
-                variant="outline"
+                variant={showFilters ? "default" : "outline"}
                 onClick={() => setShowFilters(!showFilters)}
                 className="gap-2"
               >
                 <Filter className="w-4 h-4" />
-                Filters
+                <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
             </div>