Phone: 44 px hit areas for icon buttons, reaction chips and short sender names #125
Loading…
Reference in a new issue
No description provided.
Delete branch "void/phone-hit-areas"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Brief ratatoskr:follow_up:chat-mind-20261113T005913080Z-t5, part 1. Measured under 44 px at 390 wide (/opt/commons/handoff/ratatoskr-render-checks-20261113/): sender names 28-43 wide, message-option buttons 26, composer buttons 32, header buttons 40 (back, search, pin, members, more, call), Desk back button 40, sky control 36, password info/eye buttons 26.
Change: styles/PhoneHit.css.ts, one owner. On a phone a ::after gives the button a 44x44 hit area centred on the drawn button; nothing drawn changes size. Rows whose neighbours sit closer than 44 get horizontal margin of half the shortfall (composer +6 each side, header +2, message options +9), so hit areas meet instead of overlapping; vertical room is cheap, horizontal is what a row pays. The message-option bar is a Menu whose overflow clips a drawn-outside hit area, so it also opens 9 px above and below. Reaction chips (26 tall) open 9 px above and below with an ::after of the same. Sender names: a negative inline margin makes the button shrink inside its shrink-to-fit parent and clip the name (tried, measured), so a name under 44 px is 44 wide, text kept at the start: real growth of at most 16 px in a header row with room for it.
Gives up: the composer row loses about 18 px of input width and the message-option bar grows ~44 px wide and 18 tall on phones; short names widen up to 16 px. Not touched: avatar buttons (36), the sign-in footer link About (39 wide), sender-name hit areas stay partly covered by the next bubble at two corners vertically (as before).
Proof. vitest src/app/phoneTapTargets.test.ts: 15 passed (CSS contract of PhoneHit, reaction chips and sender names read back from vanilla-extract's compile, nothing outside the phone query). Browser probe (tap-probe.mjs in the handoff folder, local headless chromium 390x844, a 44x44 box centred on each target, elementFromPoint at its four corners): sky control, both password-field buttons, the four header buttons, the four message-option buttons and the four composer buttons answer 4/4. Starfire was unreachable for this run, so this is not the Starfire browser. Reaction chips are inferred from the CSS test only: the demo has none on screen.
Not deployed. 🤖 Generated with Claude Code
162ad0995c0e3115809e