Give tablets the touch layout too - #5
Merged
Merged
Conversation
The mobile check required a coarse pointer and a small screen, so a tablet fell through to the desktop layout: a floating panel over a quarter of the screen, no way to hide the interface without a keyboard, and a desktop render budget (medium preset, pixel ratio 2) on a mobile GPU. The screen-size half of the test was wrong. `pointer: coarse` already means the primary pointer is a finger, which is the thing that makes hover text, keyboard shortcuts and small hit targets useless, and it is false on a touchscreen laptop with a mouse attached. That query alone is the test. Verified against the production build on four emulated devices: phone, tablet portrait, tablet landscape and desktop. The three touch devices get the collapsed sheet (3 to 5 percent of the screen), the toggle button and the low preset; the desktop is untouched. 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.
A tablet was falling through to the desktop layout. On an emulated iPad the
shipped site gives you a floating panel covering 26% of the screen, no
interface toggle at all, and the
mediumpreset at pixel ratio 2 on a mobileGPU.
The cause was my detection: it required a coarse pointer and a small
screen. The screen-size half was wrong.
pointer: coarsealready means theprimary pointer is a finger, which is exactly what makes hover text, keyboard
shortcuts and small hit targets useless, and it is false on a touchscreen
laptop with a mouse attached (
any-pointer: coarsewould be the query thatwrongly catches those). So that one query is the whole test.
Verified against the production build on four emulated devices:
🤖 Generated with Claude Code