Fix: Ensure controls fill width

This commit is contained in:
gpt-engineer-app[bot]
2025-10-28 15:23:14 +00:00
parent 72599bf62f
commit 890a6ab911
2 changed files with 7 additions and 9 deletions

View File

@@ -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>

View File

@@ -403,12 +403,10 @@ export default function Parks() {
</div>
<div className="flex gap-2 flex-1">
<div className="flex-1 sm:flex-none">
<ParkSortOptions
sort={sort}
onSortChange={setSort}
/>
</div>
<Button
variant={showFilters ? "default" : "outline"}
@@ -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" />