fix(composer): make composer icon-button tooltips click-through

[tellaho]

Category: fix
User Impact: Tooltips on the message composer's toolbar buttons no longer block clicks into the controls or the text field underneath them.

Problem: Radix/shadcn TooltipContent renders as a hoverable Portal popup with pointer-events: auto. When a composer toolbar tooltip is visible, the popup sits on top of the message textarea and intercepts the mouse, so clicking into the field while the tooltip shows fails. Reported on the composer's formatting/action buttons.

Solution: Make the fix localized to the composer rather than app-wide. A new ComposerIconButton component owns the full Tooltip → Trigger → Button → Content shape and bakes pointer-events-none onto the tooltip content (popup) only — never the trigger. Because the button owns its own tooltip, every current and future composer icon button inherits the click-through behavior and the override can't be forgotten. The shared tooltip.tsx is left untouched. The formatting sub-toolbar takes a matching content-only knob (its buttons are raw <button>s with custom active-state styling, so wrapping them was too heavy).

This satisfies the WCAG content-on-hover-or-focus constraints: pointer-events-none only affects the floating popup, so trigger focus-to-show (screen-magnification accommodation) and the hover/show lifecycle are unchanged. The caller className is merged last via tailwind-merge so the override stays adjustable. Composer labels are succinct and non-interactive.

File changes

desktop/src/features/messages/ui/ComposerIconButton.tsx (new)
forwardRef component owning Tooltip → Trigger → Button → Content. Bakes cn("pointer-events-none", tooltipClassName) onto the tooltip content only; trigger/button untouched. Defaults size="icon", type="button". Doc comment covers the three WCAG content-on-hover-or-focus constraints.

desktop/src/features/messages/ui/MessageComposerToolbar.tsx
Swapped the 6 composer icon buttons (formatting toggle ×2, close, mention, attach, spoiler) to ComposerIconButton. Send stays a raw submit Button (no tooltip).

desktop/src/features/messages/ui/FormattingToolbar.tsx
Sub-toolbar (Bold/Italic/Strikethrough/Code/Link/lists/Quote) TooltipContent takes the content-only pointer-events-none knob, with an on-site comment explaining the content-knob path for these raw active-state buttons.

desktop/playwright.config.ts
Registered the composer-scoped e2e spec in the smoke project (it was previously dangling).

desktop/e2e/screenshot-tooltip-pointer-events.spec.ts (new)
e2e cases for both surfaces: assert tooltip visible AND pointerEvents === 'none', and confirm typed text lands in the editor beneath the visible tooltip.

Reproduction Steps

1. Open a channel in the desktop app and bring up the message composer.
2. Hover (or focus) one of the composer's toolbar buttons (Mention, Attach, Spoiler, Formatting) so its tooltip appears over the textarea.
3. Open the formatting sub-toolbar and hover a button (Bold, Italic, etc.) so its tooltip shows.
4. Click on the textarea region covered by either tooltip — before this change the click was eaten; now the field receives the click and the tooltip is click-through.
5. Tab to a button to confirm focus still reveals the tooltip (focus-to-show preserved).

Screenshots/Demos

Click-through confirmed during review — tooltip renders over the textarea and the field receives input through it:

---

Follow-up: dismiss composer tooltips when the cursor leaves the trigger (commit c2a3b64f)

Problem (gap 2): With click-through fixed, the composer tooltips still persisted when you slid the cursor off the trigger onto the popup — you could camp on a tooltip and even select its text. Expected behavior: mouse off the trigger and the tooltip dismisses immediately. Root cause is Radix Tooltip's hoverable-content "safe bridge", which is on by default and deliberately keeps the popup alive as the cursor moves from trigger toward content. This is a separate lever from the pointer-events-none click-through fix above, which holds unchanged.

Solution: Set disableHoverableContent on the composer Tooltip Root in both composer surfaces — ComposerIconButton.tsx and FormattingToolbar.tsx. Root-level overrides the app-wide TooltipProvider default, so the change is genuinely scoped to the composer: the shared tooltip.tsx and the app-wide provider are untouched, and there's no app-wide behavior change. The trigger keeps its normal hover/focus-to-show lifecycle, so WCAG content-on-hover-or-focus still holds. On-site comments explain the knob.

Verification: biome check ., tsc --noEmit, and pnpm build clean; rebuilt bundle shows disableHoverableContent:!0 exactly twice (one per surface). A behavioral spec confirms both surfaces: hover trigger → tooltip shows → move cursor onto the popup → it dismisses instead of camping. The existing click-through tests still pass — no regression.

[tellaho]

moving down to draft because it's not behaving as expected