Mobile usability assessment: measured, not assumed - #125
Draft
kmatzen wants to merge 1 commit into
Draft
Conversation
…lows The mobile scaffolding here is real — drawer, bottom sheet, an md: breakpoint, an overflow menu — so it is easy to read the layout as "done". Driving it on emulated iPhone 13 / Pixel 5 / iPhone SE / landscape / iPad Mini and measuring every visible control in the live DOM says otherwise: the layout reflows fine and no width overflows, but the controls inside it are still desktop controls at desktop density. The measurements are the point, so they are recorded rather than described. The primary editing control — a NumberInput row — is 18px tall. The four toolbar buttons that are a phone user's entire navigation are 32x24. Only the palette tiles clear 44px. Tree reparenting is HTML5 drag-and-drop, which does not fire from touch at all, so the core operation of a CSG modeler has no mobile path. And the first-run mobile screen is blank, because the "No model yet" copy lives inside a drawer hidden behind an icon. Screenshots are committed alongside the findings for the claims that are easier to see than to read: the blank empty state, the duplicated NODE TREE header, the property sheet opening at 33%, and iPad portrait landing on the desktop layout with a ~200px viewport and a wrapped Sign In button. Findings only — no behaviour changes. The recommendations are ordered by what a user hits first, and the last one is a mobile Playwright project, since there is no mobile e2e coverage today and every one of these would pass CI. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
🚀 Preview deployed: https://worktree-mobile-usability-au.sinter.pages.dev (updates on every push to this PR) |
This was referenced Aug 3, 2026
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.
Findings only — no behaviour changes.
Method
Drove the app through Chromium device emulation (touch flags, DPR, device viewports) on iPhone 13 (393×664), Pixel 5, iPhone SE (320), iPhone 13 landscape (750×342) and iPad Mini portrait (768×1024), measuring every visible interactive element in the live DOM. The pixel sizes in the report are measured, not estimated. Screenshots committed under
docs/mobile-audit/screens/.Verdict
Responsive, but not touch-designed. The layout reflows correctly — no horizontal overflow at any width tested, and the drawer/sheet scaffolding exists — but the controls inside it are desktop controls at desktop density.
The findings that matter most
NumberInputrow — the control you touch most — is 296 × 18. The four toolbar buttons that are a phone user's entire navigation are 32 × 24. Viewport tools are 28 × 28, tree rows 26, their action buttons 20 × 20. Palette tiles (56 × 48) are the only pass.NodeTreeContent, hidden behind a 32×24 icon.NumberInputhas noinputMode, so dimension entry opens a QWERTY keyboard.top-10vs a 44 pxh-11toolbar).env(safe-area-inset-*), noviewport-fit=cover, nodvhunits, nooverscroll-behavior.Full detail, per-control measurements, file:line references and a P0/P1/P2 recommendation list in
docs/mobile-audit/README.md.🤖 Generated with Claude Code