From 23b0e3e14ab93065ed5adac33beba09eb183901d 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:09:52 +0000
Subject: [PATCH] Fix: Improve mobile layout spacing

---
 src/pages/Parks.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Parks.tsx b/src/pages/Parks.tsx
index f41ab984..aa791a36 100644
--- a/src/pages/Parks.tsx
+++ b/src/pages/Parks.tsx
@@ -350,14 +350,14 @@ export default function Parks() {
           </p>
           
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Badge variant="secondary" className="text-base px-3 py-1">
+            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
+              <Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
                 {filteredAndSortedParks.length} parks
               </Badge>
-              <Badge variant="outline">
+              <Badge variant="outline" className="text-xs sm:text-sm px-2 py-0.5">
                 {parks.reduce((sum, park) => sum + (park.ride_count || 0), 0)} total rides
               </Badge>
-              <Badge variant="outline">
+              <Badge variant="outline" className="text-xs sm:text-sm px-2 py-0.5 hidden xs:inline-flex sm:inline-flex">
                 {parks.reduce((sum, park) => sum + (park.coaster_count || 0), 0)} coasters
               </Badge>
             </div>