fix(mobile): raise the phone breakpoint from 430px to 600px - #390
fix(mobile): raise the phone breakpoint from 430px to 600px#390JDProfresh wants to merge 1 commit into
Conversation
|
Real-device confirmation: on the reporter's iPhone 17 Pro Max (iOS 18.7, Safari, page zoom 100%) this branch renders the phone header with the C logo and session pill and the phone toolbar with Enter and the mic, where 1.26.1 rendered the tablet layout. One note for anyone verifying on a device: a Safari page zoom below 100% widens the reported viewport and lands the page in the tablet tier regardless of this change, so check the aA menu first. |
The phone tier stopped at innerWidth < 430 and @media (max-width: 430px), so every current large phone landed in the tablet layout: the 430pt iPhone 14 Pro Max, 15 Plus, 15 Pro Max and 16 Plus, the 440pt iPhone 16 Pro Max and 17 Pro Max, Pixel 6 Pro, 7 Pro and OnePlus 12 Pro, the 448pt Pixel 8 Pro and 9 Pro XL, and the Galaxy Z Fold 5 cover screen at 460. On those devices the header icon row replaced the session pill, the toolbar kept the desktop Run Shell button instead of Enter and the mic, the keyboard accessory bar could never become visible because its .visible rule lives inside the phone block, and the toolbar jumped to the top of the page when the keyboard opened. The new cutoff is 600, the line test/mobile/devices.ts already draws between large phones (430-599) and small tablets (600-767). No physical device sits between 480 and 600, but a phone zoomed out one or two steps in Safari does: a 440pt iPhone at 85% or 75% page zoom reports 518px or 587px and still needs the phone controls, which a 480 cutoff would have taken away. The phone block is max-width: 599px and the tablet block starts at min-width: 600px, so a 600px device is a tablet in CSS and in getDeviceType() alike instead of straddling the boundary the way 430pt phones did. The number changes everywhere it is encoded: JS, CSS, comments, CLAUDE.md, the CI tests that pin the phone block, and the test:mobile helpers. Measurement history that names 430px stays as written.
25b8de6 to
c087d0a
Compare
JDProfresh
changed the title
|
Amended: the cutoff is now 600 (phone block max-width: 599px, tablet from min-width: 600px) instead of 480. The 480 revision fixed the device at 100% zoom and lost the phone controls again as soon as Safari was zoomed out one step (85% on a 440pt phone reports 518px), which the reporter hit within minutes. Re-verified on the same iPhone 17 Pro Max at 100% after the amendment: phone header, Enter and mic, accessory bar above the keyboard. CI gate re-run on the amended commit: 351 files, 6755 tests passing. |
1 participant
Fixes #389.
Problem
The phone tier ended at
innerWidth < 430/@media (max-width: 430px), so the 430pt iPhones (14 Pro Max, 15 Plus, 15 Pro Max, 16 Plus), the 440px iPhone 16 Pro Max and 17 Pro Max, Pixel 6/7 Pro and OnePlus 12 Pro, the 448px Pixel 8 Pro / 9 Pro XL and the Z Fold 5 cover screen all rendered the tablet layout: header icon row instead of the session pill, desktop Run Shell toolbar instead of Enter and the mic, and a keyboard accessory bar that could never become visible because its.visiblerule lives inside the phone block. All of those devices are already intest/mobile/devices.tsas large phones.Change
The phone cutoff moves from 430 to 600, the line
test/mobile/devices.tsalready draws between large phones (430-599) and small tablets (600-767). The phone block is@media (max-width: 599px)and the tablet block starts atmin-width: 600px, so a 600px device is a tablet in CSS and ingetDeviceType()alike rather than straddling the boundary the way 430pt phones did under the old rule.Why 600 and not something just above 448: no physical device sits between 480 and 600, but a phone zoomed out in Safari does. A 440pt iPhone at 85% or 75% page zoom reports 518px or 587px and still needs Enter and the accessory bar; the reporter hit exactly that within minutes of testing a 480 cutoff. Safari only prints the zoom percentage at 100%, so a zoomed-out page is indistinguishable from a broken one.
Everywhere the number is encoded:
mobile-handlers.js(isSmallScreen,isMediumScreen,getDeviceType), theterminal-ui.jsfallback,session-ui.jsfocus scroll,mobile-overview.jsphone querymobile.cssphone block and the tablet block'smin-width, plus the comments instyles.css,index.html,settings-ui.jsandCLAUDE.mdthat point at the blockhome-sessions,mobile-overview,mobile-tab-tap-zones,readmymind-phone-key,mobile-header-buttons-policytest/mobilehelpers, device classifier, visual-regression expectations and READMEMeasurement history that names 430px (tab tap-zone measurements at 360/393/430) stays as written. No version or CHANGELOG change, per CONTRIBUTING.
Verification
npm run typecheck,npm run lint,npm run format:check,npm run check:frontend-syntax: passnpm test: 351 files passed, 1 skipped; 6755 tests passed, 12 skippeddevice-mobileand the phone toolbar with Enter and the mic, 600px getsdevice-tablet, no console errors at any widthtest:mobileandtest:browserwere not run here (their pinned Playwright browser builds are not installed on this machine); their helpers were updated so the classifier and expectations match the new cutoffTwo notes for review: the local pre-commit prettier hook flags
test/mobile/device-matrix.test.tsandtest/mobile/visual-regression.test.ts, which already fail it on master and are outside the CIformat:checkscope, so they were left unformatted to keep this diff to the breakpoint. The branch name still says 480 from the first revision of this PR; the commit and diff are the 600 version.