What happens
On an iPhone 17 Pro Max (440 CSS px wide in portrait, same as the 16 Pro Max) Safari renders the tablet layout instead of the phone UI:
- the header shows the icon row instead of the session pill with the "C" home button
- the toolbar keeps the desktop-style Run / Run Shell / case picker row; no Enter button, no mic
- the keyboard accessory bar (arrows, /init, Tab, Esc, paste) never appears when the keyboard opens
- when the keyboard opens, the toolbar jumps to the top of the page and the terminal stays behind the keyboard
Switching Safari to "Request Desktop Website" and back changes nothing except the per-device settings namespace, which is what first made it look like a server-side problem.
Why
The phone tier is window.innerWidth < 430 (MobileDetection.isSmallScreen / getDeviceType in mobile-handlers.js, mirrored in terminal-ui.js, session-ui.js and mobile-overview.js) and @media (max-width: 430px) in mobile.css. Current large phones sit above that line:
| Device |
CSS px width |
| iPhone 14 Pro Max, 15 Plus, 15 Pro Max, 16 Plus |
430 |
| iPhone 16 Pro Max, Pixel 6 Pro, Pixel 7 Pro, OnePlus 12 Pro |
440 |
| Pixel 8 Pro, Pixel 9 Pro XL |
448 |
| Galaxy Z Fold 5 cover screen |
460 |
All of these are already listed as large phones in test/mobile/devices.ts. At 440 and up the body gets device-tablet and the phone CSS block never matches, so the accessory bar's .visible rule (which lives inside the 430px block) has no effect. The 430pt models are a half state: the CSS block matches them (max-width is inclusive) but the JS classes say tablet.
Reproduce
Playwright WebKit with the iPhone 14 descriptor and viewport: { width: 440, height: 956 } against a 1.26.1 instance: document.body.className contains device-tablet and .keyboard-accessory-bar stays display: none. Same run at 429px: device-mobile, phone toolbar with Enter and mic. Real device: iPhone 16 Pro Max, iOS Safari, same result as the 440px emulation.
Environment
- Codeman 1.26.1 from a git clone at tag
codeman@1.26.1, npm ci && npm run build, run as a systemd user service on Ubuntu 22.04 (WSL2) behind an nginx reverse proxy with TLS termination
- Browser: iOS Safari on iPhone 17 Pro Max
- Session CLI: Claude Code 2.1.263
Workaround
Safari's aA menu, page zoom 115% for the site: the CSS viewport drops to about 382px and the phone layout comes back.
Proposed fix
Raise the phone breakpoint to 600px everywhere it is encoded (JS, CSS, the CI tests that pin the phone block, the test:mobile helpers), with the phone block at max-width: 599px and the tablet block from min-width: 600px. 600 is the line test/mobile/devices.ts already draws between large phones and small tablets, it covers every phone in the registry, and it keeps the phone controls on a phone that is zoomed out to 85% or 75% in Safari (518px and 587px on a 440pt iPhone), which a cutoff just above the largest device would not. PR: #390.
What happens
On an iPhone 17 Pro Max (440 CSS px wide in portrait, same as the 16 Pro Max) Safari renders the tablet layout instead of the phone UI:
Switching Safari to "Request Desktop Website" and back changes nothing except the per-device settings namespace, which is what first made it look like a server-side problem.
Why
The phone tier is
window.innerWidth < 430(MobileDetection.isSmallScreen/getDeviceTypeinmobile-handlers.js, mirrored interminal-ui.js,session-ui.jsandmobile-overview.js) and@media (max-width: 430px)inmobile.css. Current large phones sit above that line:All of these are already listed as large phones in
test/mobile/devices.ts. At 440 and up the body getsdevice-tabletand the phone CSS block never matches, so the accessory bar's.visiblerule (which lives inside the 430px block) has no effect. The 430pt models are a half state: the CSS block matches them (max-width is inclusive) but the JS classes say tablet.Reproduce
Playwright WebKit with the iPhone 14 descriptor and
viewport: { width: 440, height: 956 }against a 1.26.1 instance:document.body.classNamecontainsdevice-tabletand.keyboard-accessory-barstaysdisplay: none. Same run at 429px:device-mobile, phone toolbar with Enter and mic. Real device: iPhone 16 Pro Max, iOS Safari, same result as the 440px emulation.Environment
codeman@1.26.1,npm ci && npm run build, run as a systemd user service on Ubuntu 22.04 (WSL2) behind an nginx reverse proxy with TLS terminationWorkaround
Safari's aA menu, page zoom 115% for the site: the CSS viewport drops to about 382px and the phone layout comes back.
Proposed fix
Raise the phone breakpoint to 600px everywhere it is encoded (JS, CSS, the CI tests that pin the phone block, the
test:mobilehelpers), with the phone block atmax-width: 599pxand the tablet block frommin-width: 600px. 600 is the linetest/mobile/devices.tsalready draws between large phones and small tablets, it covers every phone in the registry, and it keeps the phone controls on a phone that is zoomed out to 85% or 75% in Safari (518px and 587px on a 440pt iPhone), which a cutoff just above the largest device would not. PR: #390.