From b276cc9948bafbf14f345685083099447b4f90a0 Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@Joshs-MacBook-Pro.local>
Date: Sun, 5 Apr 2026 09:11:34 -0400
Subject: [PATCH] polish: mobile view layout and usability improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Header:
- Hide "X of Y parks open this week" badge on mobile (hidden sm:inline-flex)
  — title + Coaster Mode button fit cleanly on a 390px screen

WeekNav:
- Arrow button padding 6px 14px → 10px 16px, minWidth: 44px for proper
  touch targets (Apple HIG recommends 44px minimum)
- Date label minWidth 200px → 140px, prevents crowding on small screens

ParkCard:
- Name container: flex: 1, minWidth: 0 so long park names don't push
  the status badge off-screen; name wraps naturally instead of overflowing
- Timezone abbreviation: opacity: 0.6 → color: var(--color-text-dim),
  semantic dimming instead of opacity for better accessibility
- Passholder label: 0.58rem → 0.65rem (was below WCAG minimum)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/HomePageClient.tsx |  4 +++-
 components/ParkCard.tsx       |  8 ++++----
 components/WeekNav.tsx        | 14 +++++++++-----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/components/HomePageClient.tsx b/components/HomePageClient.tsx
index 37c476c..35d6b4d 100644
--- a/components/HomePageClient.tsx
+++ b/components/HomePageClient.tsx
@@ -118,7 +118,7 @@ export function HomePageClient({
               </button>
             )}
 
-            <span style={{
+            <span className="hidden sm:inline-flex" style={{
               background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
               border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
               borderRadius: 20,
@@ -126,6 +126,8 @@ export function HomePageClient({
               fontSize: "0.78rem",
               color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
               fontWeight: 600,
+              alignItems: "center",
+              whiteSpace: "nowrap",
             }}>
               {visibleParks.length} of {PARKS.length} parks open this week
             </span>
diff --git a/components/ParkCard.tsx b/components/ParkCard.tsx
index b1c83e4..a269b5b 100644
--- a/components/ParkCard.tsx
+++ b/components/ParkCard.tsx
@@ -40,7 +40,7 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
           justifyContent: "space-between",
           gap: 12,
         }}>
-          <div>
+          <div style={{ flex: 1, minWidth: 0 }}>
             <div style={{
               fontSize: "0.95rem",
               fontWeight: 600,
@@ -137,10 +137,10 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
                   <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                     {isPH && (
                       <span style={{
-                        fontSize: "0.58rem",
+                        fontSize: "0.65rem",
                         fontWeight: 700,
                         color: "var(--color-ph-label)",
-                        letterSpacing: "0.05em",
+                        letterSpacing: "0.04em",
                         textTransform: "uppercase",
                       }}>
                         Passholder
@@ -156,7 +156,7 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
                         : "var(--color-open-hours)",
                     }}>
                       {dayData.hoursLabel}{" "}
-                      <span style={{ fontSize: "0.68rem", fontWeight: 400, opacity: 0.6 }}>
+                      <span style={{ fontSize: "0.68rem", fontWeight: 400, color: "var(--color-text-dim)" }}>
                         {tzAbbr}
                       </span>
                     </span>
diff --git a/components/WeekNav.tsx b/components/WeekNav.tsx
index 72c5118..30b6f12 100644
--- a/components/WeekNav.tsx
+++ b/components/WeekNav.tsx
@@ -75,7 +75,7 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
         fontSize: "1rem",
         fontWeight: 600,
         color: "var(--color-text)",
-        minWidth: 200,
+        minWidth: 140,
         textAlign: "center",
         letterSpacing: "-0.01em",
         fontVariantNumeric: "tabular-nums",
@@ -97,8 +97,8 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
 }
 
 const navBtnStyle: React.CSSProperties = {
-  padding: "6px 14px",
-  borderRadius: 6,
+  padding: "10px 16px",
+  borderRadius: 8,
   border: "1px solid var(--color-border)",
   background: "var(--color-surface)",
   color: "var(--color-text-muted)",
@@ -106,11 +106,13 @@ const navBtnStyle: React.CSSProperties = {
   fontSize: "1rem",
   lineHeight: 1,
   transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
+  minWidth: 44,
+  textAlign: "center",
 };
 
 const navBtnHover: React.CSSProperties = {
-  padding: "6px 14px",
-  borderRadius: 6,
+  padding: "10px 16px",
+  borderRadius: 8,
   border: "1px solid var(--color-text-dim)",
   background: "var(--color-surface-2)",
   color: "var(--color-text-secondary)",
@@ -118,6 +120,8 @@ const navBtnHover: React.CSSProperties = {
   fontSize: "1rem",
   lineHeight: 1,
   transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
+  minWidth: 44,
+  textAlign: "center",
 };
 
 const todayBtnStyle: React.CSSProperties = {