mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 09:51:12 -05:00
Refactor: Improve mobile row layout
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user