Repository navigation
Make Start, Select and Menu big enough to tap on phones - #3
Merged
Merged
Conversation
On a portrait iPhone these buttons were sized from the d-pad, which made them 18px tall with a 13px dot and 8.6px labels. They now get at least a 44px touch target and a 24-32px dot. In the stacked layout they use the full side column and their labels are sized to fit it. Larger screens, such as laptops, keep about the same look. Assisted-by: claude-opus-5-5 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013mySqFhLDykUTkvwZ3ZBZ4
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
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
On an iPhone, the Start, Select and Menu buttons were much too small to tap reliably. Their size was derived from the d-pad size, which is small on portrait phones. Measured at 393×852 (iPhone 16):
Change
smallButton()helper induo/duo.js. Each button gets a touch target at least 44px tall (Apple's minimum) and a dot of 24–32px. The label size is chosen so it fits the available width.duo/duo.css: the dot size comes from a--dotvariable set by the layout.On a laptop (1440×900) the buttons look about the same as before (44px tall, 32px dot, 14px label).
Testing
Headless Chromium at 400×560 (foldable), 393×852 and 852×393 (iPhone 16 portrait/landscape), 375×667 and 1440×900:
Not yet tested on a real iPhone.
Assisted-by: claude-opus-5-5
Generated by Claude Code