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

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