polish: mobile view layout and usability improvements
All checks were successful
Build and Deploy / Build & Push (push) Successful in 53s

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>
This commit is contained in:
Josh Wright
2026-04-05 09:11:34 -04:00
parent 53297a7cff
commit b276cc9948
3 changed files with 16 additions and 10 deletions

View File

@@ -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>