Fix grid and filter sizing

This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:33:49 +00:00
parent 703dbcd8af
commit ef312618f5
11 changed files with 22 additions and 22 deletions

View File

@@ -85,7 +85,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
</div> </div>
<FilterSection title="Basic Filters"> <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"> <div className="space-y-2">
<Label>Entity Type</Label> <Label>Entity Type</Label>
<Select <Select
@@ -126,7 +126,7 @@ export function DesignerFilters({ filters, onFiltersChange, designers }: Designe
<Separator /> <Separator />
<FilterSection title="Statistics"> <FilterSection title="Statistics">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 gap-4">
<FilterRangeSlider <FilterRangeSlider
label="Rating" label="Rating"
value={[filters.minRating, filters.maxRating]} value={[filters.minRating, filters.maxRating]}

View File

@@ -85,7 +85,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
</div> </div>
<FilterSection title="Basic Filters"> <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"> <div className="space-y-2">
<Label>Entity Type</Label> <Label>Entity Type</Label>
<Select <Select
@@ -126,7 +126,7 @@ export function ManufacturerFilters({ filters, onFiltersChange, manufacturers }:
<Separator /> <Separator />
<FilterSection title="Statistics"> <FilterSection title="Statistics">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 gap-4">
<FilterRangeSlider <FilterRangeSlider
label="Rating" label="Rating"
value={[filters.minRating, filters.maxRating]} value={[filters.minRating, filters.maxRating]}

View File

@@ -88,7 +88,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
</div> </div>
<FilterSection title="Basic Filters"> <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 <FilterMultiSelectCombobox
label="Headquarters Country" label="Headquarters Country"
options={countryOptions} options={countryOptions}
@@ -111,7 +111,7 @@ export function OperatorFilters({ filters, onFiltersChange, operators }: Operato
<Separator /> <Separator />
<FilterSection title="Statistics"> <FilterSection title="Statistics">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 gap-4">
<FilterRangeSlider <FilterRangeSlider
label="Rating" label="Rating"
value={[filters.minRating, filters.maxRating]} value={[filters.minRating, filters.maxRating]}

View File

@@ -144,7 +144,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
</div> </div>
<FilterSection title="Basic Filters"> <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 */} {/* Park Type */}
<div className="space-y-2"> <div className="space-y-2">
<Label>Park Type</Label> <Label>Park Type</Label>
@@ -227,7 +227,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
<Separator /> <Separator />
<FilterSection title="Operators & Owners"> <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 <FilterMultiSelectCombobox
label="Operators" label="Operators"
options={operatorOptions} options={operatorOptions}
@@ -248,7 +248,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
<Separator /> <Separator />
<FilterSection title="Opening Dates"> <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 <FilterDateRangePicker
label="Opening Year" label="Opening Year"
fromDate={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : null} fromDate={filters.openingYearStart ? new Date(filters.openingYearStart, 0, 1) : null}
@@ -270,7 +270,7 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
<Separator /> <Separator />
<FilterSection title="Statistics"> <FilterSection title="Statistics">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 gap-4">
<FilterRangeSlider <FilterRangeSlider
label="Rating" label="Rating"
value={[filters.minRating, filters.maxRating]} value={[filters.minRating, filters.maxRating]}

View File

@@ -7,7 +7,7 @@ interface ParkGridViewProps {
export function ParkGridView({ parks }: ParkGridViewProps) { export function ParkGridView({ parks }: ParkGridViewProps) {
return ( 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) => ( {parks.map((park) => (
<ParkCard <ParkCard
key={park.id} key={park.id}

View File

@@ -218,7 +218,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
{/* Basic Filters */} {/* Basic Filters */}
<FilterSection title="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 <FilterMultiSelectCombobox
label="Categories" label="Categories"
options={categoryOptions} options={categoryOptions}
@@ -252,7 +252,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
{/* Geographic Filters */} {/* Geographic Filters */}
<FilterSection title="Location"> <FilterSection title="Location">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4">
<FilterMultiSelectCombobox <FilterMultiSelectCombobox
label="Countries" label="Countries"
options={countryOptions} options={countryOptions}
@@ -281,7 +281,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
{/* Relationship Filters */} {/* Relationship Filters */}
<FilterSection title="Parks & Companies"> <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 <FilterMultiSelectCombobox
label="Parks" label="Parks"
options={parkOptions} options={parkOptions}
@@ -310,7 +310,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
{/* Coaster-Specific Filters */} {/* Coaster-Specific Filters */}
<FilterSection title="Coaster Details"> <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 <FilterMultiSelectCombobox
label="Coaster Type" label="Coaster Type"
options={coasterTypeOptions} options={coasterTypeOptions}
@@ -346,7 +346,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
{/* Numeric Range Filters */} {/* Numeric Range Filters */}
<FilterSection title="Statistics"> <FilterSection title="Statistics">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 gap-4">
<FilterRangeSlider <FilterRangeSlider
label="Speed" label="Speed"
value={[filters.minSpeed, filters.maxSpeed]} value={[filters.minSpeed, filters.maxSpeed]}
@@ -389,7 +389,7 @@ export function RideFilters({ filters, onFiltersChange, rides }: RideFiltersProp
{/* Date Filters */} {/* Date Filters */}
<FilterSection title="Dates"> <FilterSection title="Dates">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 gap-4">
<FilterDateRangePicker <FilterDateRangePicker
label="Opening Date" label="Opening Date"
fromDate={filters.openingDateFrom} fromDate={filters.openingDateFrom}

View File

@@ -193,7 +193,7 @@ export default function Designers() {
{/* Main Content Area with Sidebar */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */} {/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0"> <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
<div className="sticky top-24"> <div className="sticky top-24">
<Card> <Card>
<CardContent className="pt-6"> <CardContent className="pt-6">

View File

@@ -206,7 +206,7 @@ export default function Manufacturers() {
{/* Main Content Area with Sidebar */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */} {/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0"> <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
<div className="sticky top-24"> <div className="sticky top-24">
<Card> <Card>
<CardContent className="pt-6"> <CardContent className="pt-6">

View File

@@ -264,7 +264,7 @@ const Operators = () => {
{/* Main Content Area with Sidebar */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */} {/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0"> <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
<div className="sticky top-24"> <div className="sticky top-24">
<Card> <Card>
<CardContent className="pt-6"> <CardContent className="pt-6">

View File

@@ -457,7 +457,7 @@ export default function Parks() {
{/* Main Content Area with Sidebar */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */} {/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0"> <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
<div className="sticky top-24"> <div className="sticky top-24">
<Card> <Card>
<CardContent className="pt-6"> <CardContent className="pt-6">

View File

@@ -213,7 +213,7 @@ export default function Rides() {
{/* Main Content Area with Sidebar */} {/* Main Content Area with Sidebar */}
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">
{/* Desktop Filter Sidebar */} {/* Desktop Filter Sidebar */}
<aside className="hidden lg:block lg:w-80 xl:w-96 flex-shrink-0"> <aside className="hidden lg:block lg:w-[340px] xl:w-[380px] 2xl:w-[420px] flex-shrink-0">
<div className="sticky top-24"> <div className="sticky top-24">
<Card> <Card>
<CardContent className="pt-6"> <CardContent className="pt-6">