Skip to content

Mobile experience: touch targets, iOS zoom, overflow, and inaccessible buttons #39

Description

@tinkerwise

Problem

The site is effectively unusable on iPhone. Screen recordings show horizontal overflow and a rubber-band bounce that makes the header/scores bar temporarily inaccessible after scrolling.

Detailed audit findings:

  • iOS auto-zoombody is 15px; derived input/select font sizes are 11–13px, triggering iOS Safari viewport zoom on every focus
  • 10+ touch targets below 44px — category pills (28px), share button (28×28), media play button (28×28), schedule nav buttons (32×32), division tabs, standings toggles, and more
  • Overscroll bounce — no overscroll-behavior set; iOS momentum scroll lets the page travel past the top, temporarily hiding the header and scores bar
  • Box score popover silently disabled — chips have cursor: pointer and a click handler on mobile but the popover is display: none !important; tapping does nothing with no feedback
  • Score chips too dense — pitcher name, weather, and broadcast clutter the chip on a small screen where only teams + score are needed

Full audit documented in SITE_REVIEW.md.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions