Phone hit: editor toolbar, emoji sidebar, upload cards, client root #139

Merged

void merged 3 commits from void/phone-hit-editor into dev 2026-11-13 13:34:33 +00:00

Conversation 0 Commits 3 Files changed 6 +124

void commented 2026-11-13 07:16:57 +00:00

Member

Copy link

Group 2 of the IconButton phone hit-area audit (foundation: #129). Variants only; no button's own drawn size changes, but on phones the Spread/Room variants add margin, so layout does change (see Layout regression risk). Test: src/app/phoneHit.editor.test.ts (variant per button in source order, size tie per file, plus one check for the estate button).

Changed

file	button	variant	reason
components/editor/Toolbar.tsx	Mark button	PhoneHitSpread36	size 400 + 20 px icon = 36 px, row of toolbar buttons 4 px apart
	Block button	PhoneHitSpread36	same row
	Heading 1/2/3 (x3)	PhoneHitRoom36	36 px in the heading Menu (overflow hidden rule). Note: the Menu has 4 px padding that would absorb the 4 px reach, so Spread36 might have sufficed; Room36 follows the clipping rule and costs 8 px of Menu height on phones
	Heading opener	PhoneHit	two 20 px icons, width unset = 56 x 36: wider than 44, only height short
	Exit chip	PhoneHit	text label, wider than 44; ::after is max(100%, 44)
	Markdown toggle	PhoneHit	28 px, alone at the end of the toolbar
components/emoji-board/components/Sidebar.tsx	SidebarBtn	PhoneHit	24 px icon/img + 16 = 40 px wide, vertical stack: no vertical variant exists, so PhoneHit; stack gap is gap="100" = 4 px, so the 44 px areas touch with no overlap (gap pinned by a test)
components/upload-card/UploadCardRenderer.tsx	Cancel	PhoneHitSpread28	28 px, Retry chip beside it after a failed upload
components/upload-card/CompactUploadCardRenderer.tsx	Cancel	PhoneHitSpread28	same (audit said PhoneHit; the compact card has the same Retry chip beside it)
pages/client/ClientRoot.tsx	Options	PhoneHit	36 px, alone, absolute in the corner (inline position:absolute beats the class's relative and still anchors the ::after); hit area reaches exactly the screen edge

The Toolbar buttons sit in a Scroll (overflow auto) with 4 px padding, which holds the 4 px reach of a 36 px Spread button exactly.

Skipped

• features/estate/EstateNavigator.tsx "Find a room": already 44 px on phones, the header Box carries css.Targets (min 44 x 44 for every button there). Audit proposed Spread36; wrong, a class would be redundant. The test pins that the button has no PhoneHit, is nested inside the Box carrying Targets (JSX nesting counted), and that the phone rule is on that class's own ident.
• components/editor/Editor.preview.tsx (5 buttons): imported nowhere, never renders. Deletable; left alone.

Mutants (all killed)

• Toolbar Room36 -> Spread36: 1 failed (variant list)
• UploadCardRenderer Spread28 -> Spread32: 2 failed (variant list, size tie)
• ClientRoot PhoneHit -> Spread40: 2 failed (variant list, size tie)
• Sidebar class removed: 1 failed
• Sidebar stack gap="0": 1 failed
• Estate Targets selector renamed: 1 failed; Targets Box emptied (button outside it): 1 failed
• ClientRoot inline position absolute removed: 1 failed
• EstateNavigator css.Targets removed: 1 failed

Vitest run: phoneHit.editor, phoneTapTargets, phoneHitTestKit 62/62 pass; eslint (only 3 pre-existing warnings in ClientRoot) and prettier clean.

Layout regression risk (unmeasured)

• Toolbar on a 320 px phone: each Spread36/Room36 button gains 8 px of inline margin on phones, about 10 buttons, so the toolbar row grows from roughly 485 to roughly 565 px inside a horizontal Scroll (size 0). The markdown toggle at the end moves further off-screen. Variants kept; this is a risk, not measured.
• Upload cards: Spread28 adds 16 px of inline margin to the cancel button on phones, which also shifts the Retry chip.

Unmeasured on a real phone

Nothing here was measured on a phone. Unverified: the Exit chip's real width, the emoji sidebar's overlap behaviour, the Menu height growth from Room36, the Retry chip shifting position from Spread28's extra margin on phones, and that ClientRoot's corner button taps cleanly at the screen edge.

🤖 Generated with Claude Code

Group 2 of the IconButton phone hit-area audit (foundation: #129). Variants only; no button's own drawn size changes, but on phones the Spread/Room variants add margin, so layout does change (see Layout regression risk). Test: `src/app/phoneHit.editor.test.ts` (variant per button in source order, size tie per file, plus one check for the estate button). ## Changed | file | button | variant | reason | |---|---|---|---| | components/editor/Toolbar.tsx | Mark button | PhoneHitSpread36 | size 400 + 20 px icon = 36 px, row of toolbar buttons 4 px apart | | | Block button | PhoneHitSpread36 | same row | | | Heading 1/2/3 (x3) | PhoneHitRoom36 | 36 px in the heading Menu (overflow hidden rule). Note: the Menu has 4 px padding that would absorb the 4 px reach, so Spread36 might have sufficed; Room36 follows the clipping rule and costs 8 px of Menu height on phones | | | Heading opener | PhoneHit | two 20 px icons, width unset = 56 x 36: wider than 44, only height short | | | Exit chip | PhoneHit | text label, wider than 44; ::after is max(100%, 44) | | | Markdown toggle | PhoneHit | 28 px, alone at the end of the toolbar | | components/emoji-board/components/Sidebar.tsx | SidebarBtn | PhoneHit | 24 px icon/img + 16 = 40 px wide, vertical stack: no vertical variant exists, so PhoneHit; stack gap is gap="100" = 4 px, so the 44 px areas touch with no overlap (gap pinned by a test) | | components/upload-card/UploadCardRenderer.tsx | Cancel | PhoneHitSpread28 | 28 px, Retry chip beside it after a failed upload | | components/upload-card/CompactUploadCardRenderer.tsx | Cancel | PhoneHitSpread28 | same (audit said PhoneHit; the compact card has the same Retry chip beside it) | | pages/client/ClientRoot.tsx | Options | PhoneHit | 36 px, alone, absolute in the corner (inline position:absolute beats the class's relative and still anchors the ::after); hit area reaches exactly the screen edge | The Toolbar buttons sit in a Scroll (overflow auto) with 4 px padding, which holds the 4 px reach of a 36 px Spread button exactly. ## Skipped - features/estate/EstateNavigator.tsx "Find a room": already 44 px on phones, the header Box carries `css.Targets` (min 44 x 44 for every button there). Audit proposed Spread36; wrong, a class would be redundant. The test pins that the button has no PhoneHit, is nested inside the Box carrying Targets (JSX nesting counted), and that the phone rule is on that class's own ident. - components/editor/Editor.preview.tsx (5 buttons): imported nowhere, never renders. **Deletable**; left alone. ## Mutants (all killed) - Toolbar Room36 -> Spread36: 1 failed (variant list) - UploadCardRenderer Spread28 -> Spread32: 2 failed (variant list, size tie) - ClientRoot PhoneHit -> Spread40: 2 failed (variant list, size tie) - Sidebar class removed: 1 failed - Sidebar stack gap="0": 1 failed - Estate Targets selector renamed: 1 failed; Targets Box emptied (button outside it): 1 failed - ClientRoot inline position absolute removed: 1 failed - EstateNavigator `css.Targets` removed: 1 failed Vitest run: phoneHit.editor, phoneTapTargets, phoneHitTestKit 62/62 pass; eslint (only 3 pre-existing warnings in ClientRoot) and prettier clean. ## Layout regression risk (unmeasured) - Toolbar on a 320 px phone: each Spread36/Room36 button gains 8 px of inline margin on phones, about 10 buttons, so the toolbar row grows from roughly 485 to roughly 565 px inside a horizontal Scroll (size 0). The markdown toggle at the end moves further off-screen. Variants kept; this is a risk, not measured. - Upload cards: Spread28 adds 16 px of inline margin to the cancel button on phones, which also shifts the Retry chip. ## Unmeasured on a real phone Nothing here was measured on a phone. Unverified: the Exit chip's real width, the emoji sidebar's overlap behaviour, the Menu height growth from Room36, the Retry chip shifting position from Spread28's extra margin on phones, and that ClientRoot's corner button taps cleanly at the screen edge. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

void added 1 commit 2026-11-13 07:16:57 +00:00

Phone hit: editor toolbar, emoji sidebar, upload cards, client root ... da05210db2

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

void added 1 commit 2026-11-13 07:21:59 +00:00

Phone hit editor tests: pin estate Targets nesting and selector, ClientRoot inline absolute, sidebar gap ... 761d13fac5

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

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

Merge branch 'dev' into void/phone-hit-editor 9153ee945d

void merged commit 1a3eedf6cb into dev 2026-11-13 13:34:33 +00:00

void referenced this pull request from a commit 2026-11-13 13:34:34 +00:00

Merge pull request 'Phone hit: editor toolbar, emoji sidebar, upload cards, client root' (#139) from void/phone-hit-editor 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!139

No description provided.