From fd4530989120710e69b7a366916455570a1f0232 Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@Joshs-MacBook-Pro.local>
Date: Sun, 5 Apr 2026 08:22:06 -0400
Subject: [PATCH] polish: clarify parks open badge; improve timezone display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "parks open" → "parks open this week" for clarity
- Week calendar cells: stack hours above tz abbreviation (smaller,
  dimmer) instead of inline to avoid overflow in tight 130px columns
- Mobile park cards: tz abbreviation inline but smaller/dimmer (60% opacity)
- Month calendar: same two-line stacking in compact day cells

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/page.tsx                     |  2 +-
 components/ParkCard.tsx          |  5 ++++-
 components/ParkMonthCalendar.tsx | 10 ++++++++--
 components/WeekCalendar.tsx      | 25 ++++++++++++++++++++++---
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 149d6ac..d90edce 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -135,7 +135,7 @@ export default async function HomePage({ searchParams }: PageProps) {
             color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
             fontWeight: 600,
           }}>
-            {visibleParks.length} of {PARKS.length} parks open
+            {visibleParks.length} of {PARKS.length} parks open this week
           </span>
         </div>
 
diff --git a/components/ParkCard.tsx b/components/ParkCard.tsx
index eaa8f51..549d85a 100644
--- a/components/ParkCard.tsx
+++ b/components/ParkCard.tsx
@@ -154,7 +154,10 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
                         ? "var(--color-today-text)"
                         : "var(--color-open-hours)",
                     }}>
-                      {dayData.hoursLabel} {tzAbbr}
+                      {dayData.hoursLabel}{" "}
+                      <span style={{ fontSize: "0.68rem", fontWeight: 400, opacity: 0.6 }}>
+                        {tzAbbr}
+                      </span>
                     </span>
                   </div>
                 </div>
diff --git a/components/ParkMonthCalendar.tsx b/components/ParkMonthCalendar.tsx
index 49164b9..6478491 100644
--- a/components/ParkMonthCalendar.tsx
+++ b/components/ParkMonthCalendar.tsx
@@ -187,7 +187,10 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today, timez
                         Passholder
                       </div>
                       <div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 2 }}>
-                        {dayData.hoursLabel} {tzAbbr}
+                        {dayData.hoursLabel}
+                      </div>
+                      <div style={{ fontSize: "0.58rem", color: "var(--color-ph-label)", opacity: 0.75, marginTop: 1, letterSpacing: "0.04em" }}>
+                        {tzAbbr}
                       </div>
                     </div>
                   ) : isOpen ? (
@@ -198,7 +201,10 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today, timez
                       padding: "3px 6px",
                     }}>
                       <div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}>
-                        {dayData.hoursLabel} {tzAbbr}
+                        {dayData.hoursLabel}
+                      </div>
+                      <div style={{ fontSize: "0.58rem", color: "var(--color-open-hours)", opacity: 0.6, marginTop: 1, letterSpacing: "0.04em" }}>
+                        {tzAbbr}
                       </div>
                     </div>
                   ) : (
diff --git a/components/WeekCalendar.tsx b/components/WeekCalendar.tsx
index 73ba085..b4da7a6 100644
--- a/components/WeekCalendar.tsx
+++ b/components/WeekCalendar.tsx
@@ -100,7 +100,15 @@ function DayCell({
             letterSpacing: "-0.01em",
             whiteSpace: "nowrap",
           }}>
-            {dayData.hoursLabel} {tzAbbr}
+            {dayData.hoursLabel}
+          </span>
+          <span style={{
+            color: "var(--color-ph-label)",
+            fontSize: "0.6rem",
+            fontWeight: 500,
+            letterSpacing: "0.04em",
+          }}>
+            {tzAbbr}
           </span>
         </div>
       </td>
@@ -113,12 +121,14 @@ function DayCell({
         background: "var(--color-open-bg)",
         border: "1px solid var(--color-open-border)",
         borderRadius: 6,
-        padding: "6px 4px",
+        padding: "4px",
         textAlign: "center",
         height: "100%",
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
+        gap: 2,
         transition: "filter 150ms ease",
       }}>
         <span style={{
@@ -128,7 +138,16 @@ function DayCell({
           letterSpacing: "-0.01em",
           whiteSpace: "nowrap",
         }}>
-          {dayData.hoursLabel} {tzAbbr}
+          {dayData.hoursLabel}
+        </span>
+        <span style={{
+          color: "var(--color-open-hours)",
+          fontSize: "0.6rem",
+          fontWeight: 500,
+          opacity: 0.6,
+          letterSpacing: "0.04em",
+        }}>
+          {tzAbbr}
         </span>
       </div>
     </td>