pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 15:11:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Improve mobile row layout

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/parks/ParkSortOptions.tsx
View File

@@ -26,12 +26,12 @@ export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
}; };
return ( return (
<div className="flex gap-2"> <div className="flex gap-2 w-full">
<Select <Select
value={sort.field} value={sort.field}
onValueChange={(field) => onSortChange({ ...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" /> <ArrowUpDown className="w-4 h-4 mr-2" />
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>

16
src/pages/Parks.tsx
View File

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