From 56c7b90262b77fa18f037914b50e84065871f935 Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@Joshs-MacBook-Pro.local>
Date: Sun, 5 Apr 2026 14:41:46 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20responsive=20park=20column=20=E2=80=94?=
 =?UTF-8?q?=20percentage=20width,=20no=20nowrap,=20original=20font=20sizes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause was a hardcoded 240px column width + whiteSpace:nowrap that
prevented content from ever fitting on smaller displays. Now uses 25%
width so the column scales with the viewport, removed nowrap so text
wraps naturally when squeezed, and reverted clamp() back to fixed sizes.

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

diff --git a/components/WeekCalendar.tsx b/components/WeekCalendar.tsx
index 414ba2f..3fe6aea 100644
--- a/components/WeekCalendar.tsx
+++ b/components/WeekCalendar.tsx
@@ -216,7 +216,6 @@ function ParkRow({
         padding: 0,
         borderBottom: "1px solid var(--color-border)",
         borderRight: "1px solid var(--color-border)",
-        whiteSpace: "nowrap",
         verticalAlign: "middle",
         background: rowBg,
         transition: "background 120ms ease",
@@ -230,7 +229,7 @@ function ParkRow({
         }}>
           <div style={{ minWidth: 0, flex: 1 }}>
             <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
-              <span style={{ fontWeight: 500, fontSize: "clamp(0.68rem, 1.1vw, 0.85rem)", lineHeight: 1.2, color: "var(--color-text)" }}>
+              <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)" }}>
                 {park.name}
               </span>
               {rideCounts?.[park.id] !== undefined && (
@@ -246,12 +245,12 @@ function ParkRow({
                 }} />
               )}
             </div>
-            <div style={{ fontSize: "clamp(0.58rem, 0.9vw, 0.7rem)", color: "var(--color-text-muted)", marginTop: 2 }}>
+            <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
               {park.location.city}, {park.location.state}
             </div>
           </div>
           {rideCounts?.[park.id] !== undefined && (
-            <div style={{ fontSize: "clamp(0.58rem, 0.95vw, 0.72rem)", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, textAlign: "right", whiteSpace: "nowrap" }}>
+            <div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, textAlign: "right" }}>
               {rideCounts[park.id]} {coastersOnly
                 ? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
                 : (rideCounts[park.id] === 1 ? "ride" : "rides")} operating
@@ -295,7 +294,7 @@ export function WeekCalendar({ parks, weekDates, data, grouped, rideCounts, coas
         tableLayout: "fixed",
       }}>
         <colgroup>
-          <col style={{ width: 240 }} />
+          <col style={{ width: "25%" }} />
           {weekDates.map((d) => (
             <col key={d} style={{ width: 130 }} />
           ))}