Skip to content

Mobile overhaul: touch targets, iOS zoom, overscroll, bottom-sheet popover#40

Open
tinkerwise wants to merge 1 commit into
mainfrom
feature/mobile-overhaul
Open

Mobile overhaul: touch targets, iOS zoom, overscroll, bottom-sheet popover#40
tinkerwise wants to merge 1 commit into
mainfrom
feature/mobile-overhaul

Conversation

@tinkerwise

Copy link
Copy Markdown
Owner

Closes #39

Summary

All changes are CSS-only (public/style.css) — no JS or template changes required.

  • Overscroll bounce fixedoverscroll-behavior-y: none on html stops iOS rubber-band from scrolling the page past the top and hiding the header/scores bar; overscroll-behavior-x: contain on .scores-bar keeps chip swipes from interfering with page scroll
  • iOS auto-zoom fixedbody bumped to 16px on mobile; all inputs and selects explicitly set to font-size: 16px to prevent iOS Safari zooming the viewport on focus
  • 11 touch targets brought to ≥44px — pills, source filter button, sort select, division tabs, leaders scope buttons, standings league toggle, share button, media play button, section toggle accordion headers, schedule nav/today/view buttons
  • Box score popover works on mobile — replaced display: none !important with a fixed bottom sheet (75vh max-height, rounded top corners, safe-area padding) so tapping a score chip actually opens the box score
  • Schedule chips condensed.chip-wx and .chip-broadcast hidden on mobile; chips show team logo + @/vs. + result/time only

Test plan

  • Scroll to bottom of homepage on iPhone, release — header stays visible (no bounce-hide)
  • Tap the search input — page does not zoom in
  • Tap a category pill, division tab, or sort select — responds without requiring precision tap
  • Tap a score chip — box score bottom sheet slides up from bottom
  • Check schedule page — nav buttons and Month/Week toggles are comfortably tappable
  • Schedule chips show only team logo + @/vs. + score, no weather or broadcast text

Generated by Claude Code

- Add `overscroll-behavior-y: none` to html to stop iOS rubber-band
  bounce from hiding the header and scores bar
- Add `overscroll-behavior-x: contain` to .scores-bar so horizontal
  chip swipe doesn't bleed into page vertical scroll
- Set body font-size to 16px on mobile; set all inputs/selects to 16px
  explicitly to prevent iOS Safari auto-zoom on focus
- Bring 11 undersized touch targets up to 44×44px minimum: pills,
  source filter, sort select, division tabs, leaders scope, standings
  league toggle, share button, media play button, section toggles,
  schedule nav/today/view buttons
- Convert box score popover from display:none to a fixed bottom sheet
  (75vh max-height, 16px top radius) so score chip taps work on mobile
- Hide .chip-wx and .chip-broadcast on schedule chips — mobile shows
  teams + result/time only, no weather or broadcast clutter

Closes #39

https://claude.ai/code/session_01C1vhzbYUCRYNikqatrcAYN
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants