Fix grid and filter sizing

Refactor: Implement side-by-side filter layout
Fix: Ensure controls fill width
2025-12-29 05:47:06 -05:00 · 2025-10-28 15:33:49 +00:00 · 2025-10-28 15:27:50 +00:00 · 2025-10-28 15:23:14 +00:00 · 2025-10-28 15:18:23 +00:00
12 changed files with 256 additions and 160 deletions
--- 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]}
--- 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]}
--- 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]}
--- 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]}
--- 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} 
--- a/src/components/parks/ParkSortOptions.tsx
+++ b/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>
--- 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}
--- a/src/pages/Designers.tsx
+++ b/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}>
-            <CollapsibleContent>
-              <Card className="mt-4">
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
+            <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>
-          </Collapsible>
-        </div>
+            </div>
+          </aside>

-        {/* Companies Grid */}
-        {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">
-            {filteredCompanies.map((company) => (
-              <DesignerCard key={company.id} company={company} />
-            ))}
+          {/* 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-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} />
+                ))}
+              </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 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>
      </main>
      <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
--- a/src/pages/Manufacturers.tsx
+++ b/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}>
-            <CollapsibleContent>
-              <Card className="mt-4">
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
+            <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>
-          </Collapsible>
-        </div>
+            </div>
+          </aside>

-        {/* Companies Grid */}
-        {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">
-            {filteredCompanies.map((company) => (
-              <ManufacturerCard key={company.id} company={company} />
-            ))}
+          {/* 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-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} />
+                ))}
+              </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 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>
      </main>

      {/* Create Modal */}
--- a/src/pages/Operators.tsx
+++ b/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}>
-            <CollapsibleContent>
-              <Card className="mt-4">
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
+            <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>
-          </Collapsible>
+            </div>
+          </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">
--- a/src/pages/Parks.tsx
+++ b/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-1 sm:flex-none">
-                <ParkSortOptions 
-                  sort={sort}
-                  onSortChange={setSort}
-                />
-              </div>
+            <div className="flex gap-2 flex-1">
+              <ParkSortOptions 
+                sort={sort}
+                onSortChange={setSort}
+              />
              
              <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 */}
-          <Collapsible open={showFilters} onOpenChange={setShowFilters}>
-            <CollapsibleContent>
+          {/* Mobile Filters */}
+          <div className="lg:hidden">
+            <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>
-          </Collapsible>
-        </div>
+            </div>
+          </aside>

-        {/* Results */}
-        {filteredAndSortedParks.length > 0 ? (
-          <div>
-            {viewMode === 'grid' ? (
-              <ParkGridView 
-                parks={filteredAndSortedParks} 
-              />
+          {/* Results Area */}
+          <div className="flex-1 min-w-0">
+            {filteredAndSortedParks.length > 0 ? (
+              <div>
+                {viewMode === 'grid' ? (
+                  <ParkGridView 
+                    parks={filteredAndSortedParks} 
+                  />
+                ) : (
+                  <ParkListView 
+                    parks={filteredAndSortedParks} 
+                    onParkClick={handleParkClick}
+                  />
+                )}
+              </div>
            ) : (
-              <ParkListView 
-                parks={filteredAndSortedParks} 
-                onParkClick={handleParkClick}
-              />
+              <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>
            )}
          </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>
-        )}
+        </div>

        {/* Add Park Modal */}
        <Dialog open={isAddParkModalOpen} onOpenChange={setIsAddParkModalOpen}>
--- a/src/pages/Rides.tsx
+++ b/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}>
-            <CollapsibleContent>
+          {/* Mobile Filters */}
+          <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>
-          </Collapsible>
-        </div>
+            </div>
+          </aside>

-        {/* Rides Grid */}
-        {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">
-            {filteredRides.map((ride) => (
-              <RideCard key={ride.id} ride={ride} showParkName={true} />
-            ))}
+          {/* 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-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} />
+                ))}
+              </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 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>

        {/* Create Modal */}
        <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
Author	SHA1	Message	Date
gpt-engineer-app[bot]	ef312618f5	Fix grid and filter sizing	2025-10-28 15:33:49 +00:00
gpt-engineer-app[bot]	703dbcd8af	Refactor: Implement side-by-side filter layout	2025-10-28 15:27:50 +00:00
gpt-engineer-app[bot]	890a6ab911	Fix: Ensure controls fill width	2025-10-28 15:23:14 +00:00
gpt-engineer-app[bot]	72599bf62f	Fix: Make controls bar fill width	2025-10-28 15:18:23 +00:00