fix(composer): make formatting sub-toolbar tooltips click-through

The formatting sub-toolbar (Bold/Italic/lists/Quote) rendered a bare TooltipContent that still blocked the message textarea floating beneath it. These are raw <button>s with custom active styling, not the shared Button, so bake pointer-events-none onto that one TooltipContent rather than swap in ComposerIconButton. Content only — the trigger keeps pointer/focus (WCAG content-on-hover-or-focus). Adds an e2e case opening the formatting toolbar and asserting the Bold tooltip is click-through.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: npub1223z34h <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>

Author: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w

desktop/src/features/messages/ui/FormattingToolbar.tsx

@@ -291,7 +291,14 @@ export const FormattingToolbar = React.memo(function FormattingToolbar({
               <item.icon className="h-4 w-4" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>
+          {/* pointer-events-none keeps these label tooltips click-through so
+              they don't block the message textarea floating beneath them,
+              matching ComposerIconButton. Content only — the trigger button
+              keeps its pointer/focus behavior (WCAG content-on-hover-or-focus).
+              These formatting buttons are raw <button>s with custom active
+              styling, so we apply the override here rather than swap in
+              ComposerIconButton. */}
+          <TooltipContent className="pointer-events-none">
             {"shortcut" in item
               ? `${item.label} (${item.shortcut})`
               : item.label}

desktop/tests/e2e/screenshot-tooltip-pointer-events.spec.ts

@@ -43,3 +43,27 @@ test("composer tooltip is visible but click-through (pointer-events:none)", asyn
   await page.keyboard.type("clickthrough-ok");
   await expect(editor).toContainText("clickthrough-ok");
 });
+
+test("formatting sub-toolbar tooltip is visible but click-through (pointer-events:none)", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByTestId("channel-general").click();
+  await expect(page.getByTestId("chat-title")).toHaveText("general");
+
+  // Open the formatting sub-toolbar (Bold / Italic / lists / Quote …).
+  await page.getByRole("button", { name: "Toggle formatting" }).first().click();
+
+  // Hover a formatting icon button to surface its label tooltip.
+  const bold = page.getByRole("button", { name: "Bold" });
+  await expect(bold).toBeVisible();
+  await bold.hover();
+
+  // Tooltip text is "<label> (<shortcut>)" for items that carry a shortcut.
+  const tip = page.getByRole("tooltip", { name: "Bold (⌘B)" });
+  await expect(tip).toBeVisible();
+
+  // Money check: the sub-toolbar tooltip popup must be click-through too.
+  const pe = await tip.evaluate((el) => getComputedStyle(el).pointerEvents);
+  expect(pe).toBe("none");
+});