From 654a593b8bafb018a472a2a5303d402113383b95 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 30 Sep 2025 12:17:35 +0000
Subject: [PATCH] Refactor: Improve mobile row layout

---
 src/components/parks/ParkSortOptions.tsx |  4 ++--
 src/pages/Parks.tsx                      | 16 +++++++++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/parks/ParkSortOptions.tsx b/src/components/parks/ParkSortOptions.tsx
index 7286b2d8..8c46b31c 100644
--- a/src/components/parks/ParkSortOptions.tsx
+++ b/src/components/parks/ParkSortOptions.tsx
@@ -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>
diff --git a/src/pages/Parks.tsx b/src/pages/Parks.tsx
index f7930501..198b72eb 100644
--- a/src/pages/Parks.tsx
+++ b/src/pages/Parks.tsx
@@ -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" />