https://checkmate.social
Document mobile-support requirement in CLAUDE.md
Future contributors need to know that the app must work well on phones
down to iPhone SE 2/3 (375x600). Codifies the md breakpoint policy and
the 44px tap-target floor so the next layout change does not silently
regress mobile.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+31
+31
CLAUDE.md
+31
CLAUDE.md
···
108
108
`RangeError: Tried to read N byte(s) at relative offset M, but only K byte(s) remain`
109
109
in `spacetimedb.js` on the `parseRowList_fn` / `queryRowsToTableUpdates_fn` call path.
110
110
111
+
## Mobile support
112
+
113
+
This app must work well on phones in **portrait orientation**, with iPhone SE
114
+
2/3 (375×667 device, ~375×600 effective viewport in browser) as the floor we
115
+
explicitly support.
116
+
117
+
When changing layout-bearing components (`GameScreen`, `Header`, `PlayerBar`,
118
+
`LobbyScreen`, `LoginScreen`, `GameStatus`), verify mobile rendering by:
119
+
120
+
1. Loading the page in Chrome with DevTools device-toolbar emulation set to
121
+
~375×600 (iPhone SE) or similar.
122
+
2. Confirming the page fits without vertical scrolling.
123
+
3. Confirming all persistent touch targets are ≥44×44 px.
124
+
125
+
Breakpoint policy:
126
+
- Use Tailwind's `md` (768px) as the **mobile/desktop divider** for layout
127
+
treatments. Below `md` is the mobile treatment.
128
+
- The `GameScreen` move list uses a bottom-sheet drawer (`MoveDrawer`) on
129
+
mobile and a sidebar on desktop.
130
+
- Tap targets use `min-h-[44px]` (and `min-w-[44px]` for icon-only buttons).
131
+
- Avoid hand-rolled `@media` queries — use Tailwind variant classes for
132
+
greppability.
133
+
134
+
**Out of scope** (don't break it, but no commitment to support):
135
+
- Landscape orientation on phones
136
+
- iPad-specific layouts (currently picks up the desktop treatment at `md`)
137
+
- Older devices below iPhone SE 2 (375px wide)
138
+
139
+
See `docs/superpowers/specs/2026-04-15-mobile-responsive-design.md` for the
140
+
full design rationale.
141
+
111
142
## Domain
112
143
113
144
Production: `checkmate.social`