From e2498af481742f97f441d890afb3a0ec291e9d5d Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@Joshs-MacBook-Pro.local>
Date: Sun, 5 Apr 2026 14:10:45 -0400
Subject: [PATCH] fix: move ride count below park name to prevent overflow on
 small displays

Removes the space-between flex layout that pushed the count to the right
edge of a fixed-width column. Now stacks under city/state so it always
fits within the park name column regardless of screen size.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/WeekCalendar.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/WeekCalendar.tsx b/components/WeekCalendar.tsx
index e78f984..7b9495b 100644
--- a/components/WeekCalendar.tsx
+++ b/components/WeekCalendar.tsx
@@ -224,11 +224,10 @@ function ParkRow({
         <Link href={`/park/${park.id}`} className="park-name-link" style={{
           display: "flex",
           alignItems: "center",
-          justifyContent: "space-between",
           padding: "10px 14px",
           gap: 10,
         }}>
-          <div>
+          <div style={{ minWidth: 0 }}>
             <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
               <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)" }}>
                 {park.name}
@@ -249,14 +248,14 @@ function ParkRow({
             <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
               {park.location.city}, {park.location.state}
             </div>
+            {rideCounts?.[park.id] !== undefined && (
+              <div style={{ fontSize: "0.7rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, marginTop: 3 }}>
+                {rideCounts[park.id]} {coastersOnly
+                  ? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
+                  : (rideCounts[park.id] === 1 ? "ride" : "rides")} operating
+              </div>
+            )}
           </div>
-          {rideCounts?.[park.id] !== undefined && (
-            <div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0 }}>
-              {rideCounts[park.id]} {coastersOnly
-                ? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
-                : (rideCounts[park.id] === 1 ? "ride" : "rides")} operating
-            </div>
-          )}
         </Link>
       </td>