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,33 +176,52 @@ export default function Designers() {
             </div>
           </div>
           
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          {/* Mobile Filters */}
-            <CollapsibleContent>
+          <div className="lg:hidden">
-              <Card className="mt-4">
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card className="mt-4">
+                  <CardContent className="pt-6">
+                    <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
+                  </CardContent>
+                </Card>
+              </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">
                   <DesignerFilters filters={filters} onFiltersChange={setFilters} designers={companies} />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
-        </div>
 
-        {/* Companies Grid */}
+          {/* Results Area */}
-        {filteredCompanies.length > 0 ? (
+          <div className="flex-1 min-w-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">
+            {filteredCompanies.length > 0 ? (
-            {filteredCompanies.map((company) => (
+              <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">
-              <DesignerCard key={company.id} company={company} />
+                {filteredCompanies.map((company) => (
-            ))}
+                  <DesignerCard key={company.id} company={company} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+                <h3 className="text-xl font-semibold mb-2">No designers found</h3>
+                <p className="text-muted-foreground">
+                  Try adjusting your search criteria
+                </p>
+              </div>
+            )}
           </div>
-        ) : (
+        </div>
-          <div className="text-center py-12">
-            <Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
-            <h3 className="text-xl font-semibold mb-2">No designers found</h3>
-            <p className="text-muted-foreground">
-              Try adjusting your search criteria
-            </p>
-          </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,33 +189,52 @@ export default function Manufacturers() {
             </div>
           </div>
           
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          {/* Mobile Filters */}
-            <CollapsibleContent>
+          <div className="lg:hidden">
-              <Card className="mt-4">
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card className="mt-4">
+                  <CardContent className="pt-6">
+                    <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
+                  </CardContent>
+                </Card>
+              </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">
                   <ManufacturerFilters filters={filters} onFiltersChange={setFilters} manufacturers={companies} />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
-        </div>
 
-        {/* Companies Grid */}
+          {/* Results Area */}
-        {filteredCompanies.length > 0 ? (
+          <div className="flex-1 min-w-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">
+            {filteredCompanies.length > 0 ? (
-            {filteredCompanies.map((company) => (
+              <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">
-              <ManufacturerCard key={company.id} company={company} />
+                {filteredCompanies.map((company) => (
-            ))}
+                  <ManufacturerCard key={company.id} company={company} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+                <h3 className="text-xl font-semibold mb-2">No manufacturers found</h3>
+                <p className="text-muted-foreground">
+                  Try adjusting your search criteria
+                </p>
+              </div>
+            )}
           </div>
-        ) : (
+        </div>
-          <div className="text-center py-12">
-            <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
-            <h3 className="text-xl font-semibold mb-2">No manufacturers found</h3>
-            <p className="text-muted-foreground">
-              Try adjusting your search criteria
-            </p>
-          </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,49 +247,68 @@ const Operators = () => {
             </div>
           </div>
           
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          {/* Mobile Filters */}
-            <CollapsibleContent>
+          <div className="lg:hidden">
-              <Card className="mt-4">
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card className="mt-4">
+                  <CardContent className="pt-6">
+                    <OperatorFilters filters={filters} onFiltersChange={setFilters} operators={operators || []} />
+                  </CardContent>
+                </Card>
+              </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>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
+
+          {/* Results Area */}
+          <div className="flex-1 min-w-0">
+            {/* Loading State */}
+            {isLoading && (
+              <div className="text-center py-12">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+                <p className="text-muted-foreground mt-4">Loading park operators...</p>
+              </div>
+            )}
+
+            {/* Operators Grid */}
+            {!isLoading && filteredAndSortedOperators && filteredAndSortedOperators.length > 0 && (
+              <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} />
+                ))}
+              </div>
+            )}
+
+            {/* Empty State */}
+            {!isLoading && filteredAndSortedOperators?.length === 0 && (
+              <div className="text-center py-12">
+                <Building className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                <h3 className="text-lg font-semibold mb-2">No park operators found</h3>
+                <p className="text-muted-foreground">
+                  {searchTerm 
+                    ? "Try adjusting your search terms or filters"
+                    : "No park operators are currently available"
+                  }
+                </p>
+              </div>
+            )}
+          </div>
         </div>
 
-
-        {/* Loading State */}
-        {isLoading && (
-          <div className="text-center py-12">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
-            <p className="text-muted-foreground mt-4">Loading park operators...</p>
-          </div>
-        )}
-
-        {/* Operators Grid */}
-        {!isLoading && filteredAndSortedOperators && (
-          <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">
-            {filteredAndSortedOperators.map((operator) => (
-              <OperatorCard key={operator.id} company={operator} />
-            ))}
-          </div>
-        )}
-
-        {/* Empty State */}
-        {!isLoading && filteredAndSortedOperators?.length === 0 && (
-          <div className="text-center py-12">
-            <Building className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
-            <h3 className="text-lg font-semibold mb-2">No park operators found</h3>
-            <p className="text-muted-foreground">
-              {searchTerm 
-                ? "Try adjusting your search terms or filters"
-                : "No park operators are currently available"
-              }
-            </p>
-          </div>
-        )}
-
         {/* Create Modal */}
         <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
           <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">

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 
-                <ParkSortOptions 
+                sort={sort}
-                  sort={sort}
+                onSortChange={setSort}
-                  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,9 +436,29 @@ export default function Parks() {
             </div>
           </div>
 
-          {/* Advanced Filters Panel */}
+          {/* Mobile Filters */}
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          <div className="lg:hidden">
-            <CollapsibleContent>
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card>
+                  <CardContent className="pt-6">
+                    <ParkFilters 
+                      filters={filters}
+                      onFiltersChange={setFilters}
+                      parks={parks}
+                    />
+                  </CardContent>
+                </Card>
+              </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">
                   <ParkFilters 
@@ -450,36 +468,38 @@ export default function Parks() {
                   />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
-        </div>
 
-        {/* Results */}
+          {/* Results Area */}
-        {filteredAndSortedParks.length > 0 ? (
+          <div className="flex-1 min-w-0">
-          <div>
+            {filteredAndSortedParks.length > 0 ? (
-            {viewMode === 'grid' ? (
+              <div>
-              <ParkGridView 
+                {viewMode === 'grid' ? (
-                parks={filteredAndSortedParks} 
+                  <ParkGridView 
-              />
+                    parks={filteredAndSortedParks} 
+                  />
+                ) : (
+                  <ParkListView 
+                    parks={filteredAndSortedParks} 
+                    onParkClick={handleParkClick}
+                  />
+                )}
+              </div>
             ) : (
-              <ParkListView 
+              <div className="text-center py-12">
-                parks={filteredAndSortedParks} 
+                <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
-                onParkClick={handleParkClick}
+                <h3 className="text-xl font-semibold mb-2">No parks found</h3>
-              />
+                <p className="text-muted-foreground mb-4">
+                  Try adjusting your search terms or filters
+                </p>
+                <Button onClick={clearAllFilters} variant="outline">
+                  Clear all filters
+                </Button>
+              </div>
             )}
           </div>
-        ) : (
+        </div>
-          <div className="text-center py-12">
-            <FerrisWheel className="w-16 h-16 mb-4 opacity-50 mx-auto" />
-            <h3 className="text-xl font-semibold mb-2">No parks found</h3>
-            <p className="text-muted-foreground mb-4">
-              Try adjusting your search terms or filters
-            </p>
-            <Button onClick={clearAllFilters} variant="outline">
-              Clear all filters
-            </Button>
-          </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,33 +196,52 @@ export default function Rides() {
             </div>
           </div>
 
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+          {/* Mobile Filters */}
-            <CollapsibleContent>
+          <div className="lg:hidden">
+            <Collapsible open={showFilters} onOpenChange={setShowFilters}>
+              <CollapsibleContent>
+                <Card>
+                  <CardContent className="pt-6">
+                    <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
+                  </CardContent>
+                </Card>
+              </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">
                   <RideFilters filters={filters} onFiltersChange={setFilters} rides={rides} />
                 </CardContent>
               </Card>
-            </CollapsibleContent>
+            </div>
-          </Collapsible>
+          </aside>
-        </div>
 
-        {/* Rides Grid */}
+          {/* Results Area */}
-        {filteredRides.length > 0 ? (
+          <div className="flex-1 min-w-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">
+            {filteredRides.length > 0 ? (
-            {filteredRides.map((ride) => (
+              <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">
-              <RideCard key={ride.id} ride={ride} showParkName={true} />
+                {filteredRides.map((ride) => (
-            ))}
+                  <RideCard key={ride.id} ride={ride} showParkName={true} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
+                <h3 className="text-xl font-semibold mb-2">No rides found</h3>
+                <p className="text-muted-foreground">
+                  Try adjusting your search criteria or filters
+                </p>
+              </div>
+            )}
           </div>
-        ) : (
+        </div>
-          <div className="text-center py-12">
-            <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />
-            <h3 className="text-xl font-semibold mb-2">No rides found</h3>
-            <p className="text-muted-foreground">
-              Try adjusting your search criteria or filters
-            </p>
-          </div>
-        )}
 
         {/* Create Modal */}
         <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>