Fix grid and filter sizing

Refactor: Implement side-by-side filter layout
Fix: Ensure controls fill width
2025-12-31 13:26:59 -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,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">
--- 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,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 */}
--- 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,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 && (
-          <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">
+            {!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} />
                ))}
@@ -289,6 +306,8 @@ const Operators = () => {
                </p>
              </div>
            )}
+          </div>
+        </div>

        {/* Create Modal */}
        <Dialog open={isCreateModalOpen} onOpenChange={setIsCreateModalOpen}>
--- 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">
+            <div className="flex gap-2 flex-1">
              <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}>
--- 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,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}>
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