Give the phone composer's small controls a 44 px touch target

[HMarzban]

Problem

On a phone, several composer controls are smaller than the 44 px touch target that the design system sets for the composer. One fails WCAG 2.2 AA when an upload fails.

The design system says "action targets 44px mobile / 32px desktop" for the composer (.cursor/docs/design-system.md:624). The plus, emoji, and send buttons follow it with size-11.

On 14ab7f9c1, these controls do not. The design system also records most of these small sizes in its own catalog rows (.cursor/docs/design-system.md:648, :656, :659, :899). Paths are under apps/webapp/src/components/chatroom/components/MessageComposer/components/.

Control	Size	Where
Remove on a compact attachment tile, used on phones	20 × 20 px (h-5 min-h-0 w-5)	Attachments/AttachmentStrip.tsx:143
Retry on a failed compact attachment tile	40 × 40 px (the whole size-10 tile)	Attachments/AttachmentStrip.tsx:132
Voice bar Discard, Attach, Stop, and Cancel	24 px tall (btn-xs)	VoiceRecordingBar.tsx:54, :59, :101, :107
Dismiss on the reply, edit, and comment bars	24 × 24 px (CloseButton size="xs")	Context/MessageContextBar.tsx:58
Format grid buttons	40 × 40 px (size-10)	layouts/ComposerFormatPanel.tsx:25

WCAG 2.2 success criterion 2.5.8 asks for 24 × 24 CSS px, with a spacing exception. In the normal state, the 20 px remove button meets that exception, because the tile image is not a target. On upload error, a Retry button covers the whole tile, so the exception fails. Apple's Human Interface Guidelines ask for 44 × 44 pt.

A 44 px remove target and a 44 px Retry target cannot share one 40 px tile without overlap (Attachments/AttachmentStrip.tsx:104, :134, :143). So the compact tile layout must change too.

This issue does not change the 32 px pad docked controls. Those are pad controls, not composer controls.

Steps to reproduce

1. In Chrome DevTools, turn on device mode with a phone preset. Reload, so the page shows the mobile layout.
2. Open a heading chat as a channel member, and attach an image.
3. Inspect the remove button on the compact tile. See a 20 × 20 px box.

Acceptance criteria

• On a phone, every control in the table has a touch target of at least 44 × 44 px.
• No two touch targets in the table overlap each other or a neighboring control's target.
• On upload error, the Retry and remove touch targets on a compact tile do not overlap.
• Desktop sizes do not change.
• The design-system catalog rows for the voice bar, the attachment tiles, and the format grid show the new phone sizes and layout. The chatroom rules describe the new compact tile.

Agent Brief

Category: bug
Summary: Give the small phone composer controls a 44 px touch target, without changing the desktop layout.

Current behavior:
The compact attachment remove button is 20 px. The failed-tile Retry and the format grid buttons are 40 px. The voice bar buttons are 24 px tall, and the context bar dismiss is 24 px.

Desired behavior:
Each of these controls has a touch target of at least 44 × 44 px on phones, as the design system asks for composer actions. The visual size may stay compact.

Key interfaces:

• AttachmentStrip — the compact tile, its remove button, and its Retry button.
• VoiceRecordingBar — the recording and preview buttons. It has no phone signal today; read isMobile from useMessageComposer(), not a viewport breakpoint.
• MessageContextBar — the dismiss button on the reply, edit, and comment bars. It also renders on desktop and has no phone signal today; read isMobile from useMessageComposer().
• ComposerFormatPanel — the phone format grid.

Out of scope

• The 32 px pad docked controls.
• Desktop sizes.
• The composer row buttons, which are already 44 px.

Notes

Icon buttons match the plus, emoji, and send buttons: size-11 min-h-11 min-w-11 on phones. daisyUI has no 44 px button size. The voice bar text buttons take min-h-11 min-w-11 only, so a label can grow past 44 px. The dismiss follows the CloseButton rule: pass min-h-11 min-w-11 through className, never a new size variant (.cursor/docs/design-system.md:1026).

The visible glyph may stay small. On a ghost button, padding can grow the touch target. On a filled button (Attach, Stop, the compact remove), padding also grows the fill. To keep the fill small, one option is to put it on an inner element.

The chatroom rules give the compact tile a full-tile Retry on failed uploads (apps/webapp/src/components/chatroom/CLAUDE.md:63). Keep it and move the remove target outside the tile, or change it and update that rule in the same change. Coordinate with #280. It removes Retry from a tile with a size failure, and it edits the same rule.

The evidence is a class read on 14ab7f9c1. The sizes follow the Tailwind and daisyUI scales, and were not measured on a device.

[HMarzban]

Closing. Fixed in 7570f5d. On a phone, the composer's small controls have 44 px touch targets, and each attachment tile has a 44 px remove button beside it. Checked on a phone on 2026-09-22.