Phone: 44 px hit areas for the chat path's remaining icon buttons, and tests that pin them #127

Merged

void merged 3 commits from void/phone-hit-areas-2 into dev 2026-11-13 05:50:21 +00:00

Conversation 0 Commits 3 Files changed 10 +90 -10

void commented 2026-11-13 05:40:22 +00:00

Member

Copy link

Follow-up of #125. Not merged, not deployed.

Fixed (PhoneHit pattern): MessageEditor (2, Spread32: neighbours), RoomNavItem (2, Spread32), MembersDrawer (close, scroll-to-top), ReactionViewer, RoomPinMenu (unpin, close), RoomViewTyping, CallChatView, JumpToTime (all plain PhoneHit: alone in their row).

Tests (src/app/phoneTapTargets.test.ts, 18 -> 30): each file's IconButtons in source order carry the exact variant, the name is imported from styles/PhoneHit.css, and PasswordInput, Desk, SkyStateControl, PasswordLoginForm (no test before) are listed. The ::after rule now also pins content: "".

Mutation check (each mutant reverted after): Spread32->PhoneHit in MessageEditor, class dropped in JumpToTime and Desk, Room26->Spread32 in Message, ::after width/height 44->40, position, transform, spread margin /2->/4, media query 750->900: all killed. Removing content SURVIVED, so that assertion was added and the mutant is now killed.

Not measured: real-phone rendered size and tap behaviour (no browser/phone here; tests read emitted CSS and source only); the 9 px block margin of PhoneHitRoom26 inside the overflow:hidden options Menu; row growth in RoomNavItem (+12 px per button) on a narrow nav; whether the Spread margins crowd MessageEditor's toolbar at 320 px. Not audited for fixing: ~75 other files with IconButtons outside the chat path (settings, dialogs, editor Toolbar, call controls, lobby), listed by grep -rL PhoneHit on <IconButton files; most are not phone-reachable-critical but untested. tsc here shows only matrix-js-sdk type errors from the borrowed node_modules; eslint 0 errors.

🤖 Generated with Claude Code

Follow-up of #125. Not merged, not deployed. **Fixed (PhoneHit pattern):** MessageEditor (2, Spread32: neighbours), RoomNavItem (2, Spread32), MembersDrawer (close, scroll-to-top), ReactionViewer, RoomPinMenu (unpin, close), RoomViewTyping, CallChatView, JumpToTime (all plain PhoneHit: alone in their row). **Tests** (src/app/phoneTapTargets.test.ts, 18 -> 30): each file's IconButtons in source order carry the exact variant, the name is imported from styles/PhoneHit.css, and PasswordInput, Desk, SkyStateControl, PasswordLoginForm (no test before) are listed. The ::after rule now also pins `content: ""`. **Mutation check** (each mutant reverted after): Spread32->PhoneHit in MessageEditor, class dropped in JumpToTime and Desk, Room26->Spread32 in Message, ::after width/height 44->40, position, transform, spread margin /2->/4, media query 750->900: all killed. Removing `content` SURVIVED, so that assertion was added and the mutant is now killed. **Not measured:** real-phone rendered size and tap behaviour (no browser/phone here; tests read emitted CSS and source only); the 9 px block margin of PhoneHitRoom26 inside the overflow:hidden options Menu; row growth in RoomNavItem (+12 px per button) on a narrow nav; whether the Spread margins crowd MessageEditor's toolbar at 320 px. Not audited for fixing: ~75 other files with IconButtons outside the chat path (settings, dialogs, editor Toolbar, call controls, lobby), listed by `grep -rL PhoneHit` on `<IconButton` files; most are not phone-reachable-critical but untested. tsc here shows only matrix-js-sdk type errors from the borrowed node_modules; eslint 0 errors. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

void added 1 commit 2026-11-13 05:40:23 +00:00

Phone: 44 px hit areas for the chat path's remaining icon buttons; pin variant, import and ::after content ... fc92809eb9

MessageEditor, RoomNavItem, MembersDrawer, ReactionViewer, RoomPinMenu, RoomViewTyping, CallChatView and JumpToTime
get PhoneHit (alone) or PhoneHitSpread32 (two neighbours in a row). phoneTapTargets.test.ts now lists them, plus
PasswordInput, Desk, SkyStateControl and PasswordLoginForm, which had no test, checks each class is imported from
styles/PhoneHit.css, and pins the ::after content (a mutant without it passed before).

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

void added 1 commit 2026-11-13 05:46:24 +00:00

PhoneHit: Spread24 for the nav row's 24 px buttons, Spread26 for the unpin button; tests pin position, ::after declarations, className and import alias ... 446306b1e7

Soul pass on fc92809e: RoomNavItem's buttons are 24 px, not 32 (36 px pitch, hit areas overlapped); the unpin button is 26 px
beside the Open chip. Six mutants survived (position: relative, pointer-events, z-index, title for className, aliased
import); all now killed.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

void added 1 commit 2026-11-13 05:50:13 +00:00

phoneTapTargets: each Spread class owns its margin, ::after declaration set is exact, no phone rule moves position, import must not be aliased ... 0c8474231e

Soul re-gate of 446306b1: swapped Spread24/26 definitions, display:none or overflow on the ::after, position:static on a
Spread rule and an aliased import all passed; all killed now.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

void merged commit 14ee4bee03 into dev 2026-11-13 05:50:21 +00:00

void referenced this pull request from a commit 2026-11-13 05:50:22 +00:00

Merge pull request 'Phone: 44 px hit areas for the chat path's remaining icon buttons, and tests that pin them' (#127) from void/phone-hit-areas-2 into dev

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

GameCult/Ratatoskr!127

No description provided.