Fix: Improve mobile layout spacing

This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 12:09:52 +00:00
parent 50aa55ecbe
commit 23b0e3e14a

View File

@@ -350,14 +350,14 @@ export default function Parks() {
</p> </p>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
<Badge variant="secondary" className="text-base px-3 py-1"> <Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
{filteredAndSortedParks.length} parks {filteredAndSortedParks.length} parks
</Badge> </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 {parks.reduce((sum, park) => sum + (park.ride_count || 0), 0)} total rides
</Badge> </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 {parks.reduce((sum, park) => sum + (park.coaster_count || 0), 0)} coasters
</Badge> </Badge>
</div> </div>