Improve the web UI's mobile experience - #135
Merged
Merged
Conversation
The browser front-end had no viewport meta tag, so phone browsers laid the page out at their ~980px virtual viewport and scaled it down — every bit of text and every button rendered tiny. That is the main fix here; the rest is a narrow-screen pass over the same stylesheet. - Add <meta name="viewport" content="width=device-width, initial-scale=1">. - Add a @media (max-width: 600px) block so the desktop layout is untouched: - body margin 2rem -> 1rem (and padding 1rem -> .75rem) to stop spending a third of a short phone screen on empty space. - button padding .6rem -> .75rem, which takes buttons from ~40px tall to ~45px, clearing the ~44px comfortable tap target; slightly wider gaps between them to reduce mis-taps. - button.action (Continue / Submit / React!) goes full width. It is the only thing to press on those screens, so an auto-width button off to one side is a needlessly small target. - .header row gap .15rem -> .35rem: the status chips wrap onto several rows on a phone, and the rows were nearly touching. - Break long unbroken strings (overflow-wrap on body, .dialogue and buttons) so pre-wrap dialogue can never scroll the page sideways. - touch-action: manipulation on buttons to drop the double-tap-to-zoom delay. - html { text-size-adjust: 100% } so Safari does not inflate text on its own now that the viewport is device-width. Font sizes are deliberately left alone: input is 1rem = 16px, which is exactly what keeps iOS Safari from zooming in when a field is focused. No colors or layout structure changed. Tests cover the viewport tag, the narrow-screen block, and the 16px input floor, in the same style as the existing web-handler tests. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
HTML_PAGEinsrc/ui/webUserInterface.pyhad no viewport meta tag. Mobile browsers therefore laid the page out at their ~980px virtual viewport and scaled it down, so all text and controls rendered tiny. Everything else here is a targeted narrow-screen pass over the same stylesheet — no redesign, no color changes, no new dependencies (still zero external assets).Changes
The defect
<meta name="viewport" content="width=device-width, initial-scale=1">.Narrow-screen adjustments, isolated in
@media (max-width: 600px)so the desktop layout is untouched:bodymargin2rem->1remand padding1rem->.75rem. 2rem of vertical margin is a large share of a short phone screen spent on nothing.buttonpadding.6rem->.75rem. At.6remwith a 1rem font a button is roughly 40px tall, under the ~44px comfortable tap target;.75remclears it. Margin.3rem->.45remto reduce mis-taps between stacked options.button.action(Continue / Submit / React!) goes full width. It is the only control on those screens, so an auto-width button off to one side is a needlessly small target..headerrow gap.15rem->.35rem. The status chips genuinely wrap onto several rows on a phone, and at.15remthe rows sat almost on top of each other.Horizontal overflow
overflow-wrap: break-wordonbody(inherited),.dialogue, andbutton, so a long unbroken string from the game can never make the page scroll sideways —.dialogueuseswhite-space: pre-wrap, which otherwise would.Touch/text handling
touch-action: manipulationon buttons, dropping the double-tap-to-zoom delay.text-size-adjust: 100%onhtml, so Safari doesn't inflate text of its own accord now that the viewport is device-width (most visible in landscape).Deliberately left alone
inputstays atfont-size: 1rem, which resolves to 16px at the default root size — exactly the threshold that keeps iOS Safari from zooming the page in on focus. Nothing in the media query shrinks any font.max-width: 680px, full-width block buttons, and the color scheme were already fine and are unchanged..header { flex-wrap: wrap }itself — wrapping is the right behavior; only the row gap needed attention.Verification
python3 -m pytest: 410 passed.FISHE_WEB_HOST=0.0.0.0 FISHE_WEB_PORT=8234 python3 examples/web_app.py) and fetched it:GET /-> 200 with the viewport meta and the media query present in the served HTML;GET /state-> 200 JSON.tests/ui/test_webUserInterface.py, in the style of the existing web-handler tests: the viewport tag is present, the narrow-screen block exists and makes action buttons full width, and the input font size never drops below 16px.🤖 Generated with Claude Code