Refactor: Improve mobile row layout

This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 12:17:35 +00:00
parent 09a7fd9cac
commit 654a593b8b
2 changed files with 11 additions and 9 deletions

View File

@@ -26,12 +26,12 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
};
return (
<div className="flex gap-2">
<div className="flex gap-2 w-full">
<Select
value={sort.field}
onValueChange={(field) => onSortChange({ ...sort, field })}
>
<SelectTrigger className="w-48 bg-muted/50 border-border/50">
<SelectTrigger className="flex-1 sm:w-48 bg-muted/50 border-border/50">
<ArrowUpDown className="w-4 h-4 mr-2" />
<SelectValue />
</SelectTrigger>

View File

@@ -395,16 +395,18 @@ export default function Parks() {
/>
</div>
<div className="flex flex-wrap gap-1.5 sm:gap-2">
<ParkSortOptions
sort={sort}
onSortChange={setSort}
/>
<div className="flex flex-wrap gap-2 w-full lg:w-auto">
<div className="flex-1 min-w-full sm:min-w-0 sm:flex-none">
<ParkSortOptions
sort={sort}
onSortChange={setSort}
/>
</div>
<Button
variant={showFilters ? "default" : "outline"}
onClick={() => setShowFilters(!showFilters)}
className="shrink-0"
className="flex-1 sm:flex-none"
>
<Filter className="w-4 h-4 md:mr-2" />
<span className="hidden md:inline">Filters</span>
@@ -415,7 +417,7 @@ export default function Parks() {
)}
</Button>
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)} className="shrink-0 hidden md:inline-flex">
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)} className="flex-1 sm:flex-none hidden md:inline-flex">
<TabsList>
<TabsTrigger value="grid">
<Grid3X3 className="w-4 h-4" />