From 350caf1de3136f6ec473a69d394544e99dfd4d85 Mon Sep 17 00:00:00 2001
From: Will Pfleger <pfleger.will@gmail.com>
Date: Thu, 27 Aug 2026 20:22:28 -0400
Subject: [PATCH] fix(desktop): lift right auxiliary pane above shared header
 backdrop (#6966)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

The sidebar close (`X`) and `Edit` controls disappeared for in-channel
side panels on `main`. They stayed clickable but were visually washed
out.

[#6901](https://github.com/block/buzz/pull/6901) added `isolate` to
`RightAuxiliaryPane` so project workspace sheets slide over an open
thread cleanly. The pane carries no `z-index`, so isolating it makes the
whole pane subtree paint at stacking level 0 — below the channel's
sibling `z-30` shared-header backdrop in split layout. That translucent
blur strip then washes out the pane's own `z-40` header chrome, where
`X`/`Edit` live. The backdrop is `pointer-events-none`, so the controls
remained clickable but invisible (matching the reported videos).
Threads, channel settings, and in-channel agent panels all route through
this wrapper, so all three were affected; the standalone Agents-nav
panel does not render inside `ChannelPane`, so it had no backdrop and
worked.

## Fix

Add `z-31` to the pane's `aside` — above the `z-30` backdrop, still
below the `z-41` thread drawer/sheet overlays. `isolate` stays, so
#6901's sheet-over-thread layering is preserved and both behaviors
coexist.

## Regression coverage

`tests/e2e/auxiliary-pane-close-visibility.spec.ts` opens a split-layout
thread from inside a channel and asserts the pane establishes its
`isolate` stacking context and that its `z-index` outranks the
shared-header backdrop. It fails on the pre-fix tree (pane `z-index` is
`auto`) and passes with `z-31`. #6901's `project workspace sheet stays
independent from an open thread` spec still passes.

Signed-off-by: Will Pfleger <pfleger.will@gmail.com>
Co-authored-by: Duncan <dcfd242e557282d7a1e2cf2e6877522682f1e5c6156dc92ca7d90eaedd3b0f95@buzz.block.builderlab.xyz>
---
 desktop/playwright.config.ts                  |   1 +
 .../channels/ui/RightAuxiliaryPane.tsx        |   6 +-
 .../auxiliary-pane-close-visibility.spec.ts   | 113 ++++++++++++++++++
 3 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 desktop/tests/e2e/auxiliary-pane-close-visibility.spec.ts

diff --git a/desktop/playwright.config.ts b/desktop/playwright.config.ts
index 4c2b6cd7fc..2894a078d0 100644
--- a/desktop/playwright.config.ts
+++ b/desktop/playwright.config.ts
@@ -30,6 +30,7 @@ export default defineConfig({
         "**/navigation.spec.ts",
         "**/channels.spec.ts",
         "**/channel-shared-header-backdrop.spec.ts",
+        "**/auxiliary-pane-close-visibility.spec.ts",
         "**/channel-composer-overflow.spec.ts",
         "**/badge.spec.ts",
         "**/channel-browser.spec.ts",
diff --git a/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx b/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
index 49fd2b58fc..acbc938926 100644
--- a/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
+++ b/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
@@ -31,7 +31,11 @@ export function RightAuxiliaryPane({
   return (
     <aside
       className={cn(
-        "group/right-pane relative isolate flex h-full shrink-0 flex-col overflow-hidden bg-background",
+        // `isolate` lets project sheets cover threads cleanly (#6901) but
+        // traps this pane's z-40 header chrome (X/Edit) below the channel's
+        // shared z-30 header blur strip in split layout. `z-31` lifts the
+        // pane above that backdrop while staying under the z-41 thread drawer.
+        "group/right-pane relative isolate z-31 flex h-full shrink-0 flex-col overflow-hidden bg-background",
         detached
           ? "bg-transparent"
           : "before:pointer-events-none before:absolute before:bottom-0 before:left-0 before:top-0 before:z-50 before:w-px before:bg-border/80 before:content-['']",
diff --git a/desktop/tests/e2e/auxiliary-pane-close-visibility.spec.ts b/desktop/tests/e2e/auxiliary-pane-close-visibility.spec.ts
new file mode 100644
index 0000000000..4f4573fe98
--- /dev/null
+++ b/desktop/tests/e2e/auxiliary-pane-close-visibility.spec.ts
@@ -0,0 +1,113 @@
+import { expect, test } from "@playwright/test";
+
+import { waitForAnimations } from "../helpers/animations";
+import { installMockBridge } from "../helpers/bridge";
+
+type MockMessageWindow = Window & {
+  __BUZZ_E2E_EMIT_MOCK_MESSAGE__?: (input: {
+    channelName: string;
+    content: string;
+    parentEventId?: string | null;
+    pubkey?: string;
+  }) => { id: string } | undefined;
+  __BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?: (input: {
+    channelName: string;
+  }) => boolean;
+};
+
+const CHANNEL_NAME = "engineering";
+const MOCK_IDENTITY_PUBKEY = "deadbeef".repeat(8);
+const ALICE_PUBKEY =
+  "953d3363262e86b770419834c53d2446409db6d918a57f8f339d495d54ab001f";
+
+async function waitForMockLiveSubscription(
+  page: import("@playwright/test").Page,
+  channelName: string,
+) {
+  await expect
+    .poll(async () => {
+      return page.evaluate((name) => {
+        return (
+          (
+            window as MockMessageWindow
+          ).__BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?.({ channelName: name }) ??
+          false
+        );
+      }, channelName);
+    })
+    .toBe(true);
+}
+
+test.describe("auxiliary pane close visibility", () => {
+  test.use({ viewport: { width: 1280, height: 720 } });
+
+  // Regression for #6901: `isolate` on the right auxiliary pane makes it its
+  // own stacking context. With no z-index (`auto`, i.e. level 0) the entire
+  // pane subtree — including the z-40 header chrome where X/Edit live — paints
+  // below the channel's sibling z-30 shared-header backdrop in split layout,
+  // washing out the controls (they stay clickable because the backdrop is
+  // pointer-events-none, matching the reported videos). The pane's own
+  // stacking level must sit above the backdrop for the header to show through.
+  test("close button paints above the shared header backdrop in a channel thread", async ({
+    page,
+  }) => {
+    await installMockBridge(page);
+    await page.goto("/");
+    await page.getByTestId(`channel-${CHANNEL_NAME}`).click();
+    await expect(page.getByTestId("chat-title")).toHaveText(CHANNEL_NAME);
+    await waitForMockLiveSubscription(page, CHANNEL_NAME);
+
+    const rootId = await page.evaluate(
+      ({ channelName, pubkey }) =>
+        (window as MockMessageWindow).__BUZZ_E2E_EMIT_MOCK_MESSAGE__?.({
+          channelName,
+          content: "Root message for auxiliary pane close visibility.",
+          pubkey,
+        })?.id ?? null,
+      { channelName: CHANNEL_NAME, pubkey: MOCK_IDENTITY_PUBKEY },
+    );
+    expect(rootId).not.toBeNull();
+
+    await page.evaluate(
+      ({ channelName, parentEventId, pubkey }) => {
+        (window as MockMessageWindow).__BUZZ_E2E_EMIT_MOCK_MESSAGE__?.({
+          channelName,
+          content: "Reply that opens a split thread panel.",
+          parentEventId,
+          pubkey,
+        });
+      },
+      {
+        channelName: CHANNEL_NAME,
+        parentEventId: rootId,
+        pubkey: ALICE_PUBKEY,
+      },
+    );
+
+    const replyButton = page.locator('[data-testid^="reply-message-"]').first();
+    await expect(replyButton).toBeVisible();
+    await replyButton.click({ force: true });
+    await expect(page.getByTestId("message-thread-panel")).toBeVisible();
+    await waitForAnimations(page);
+
+    const closeButton = page.getByTestId("auxiliary-panel-close");
+    await expect(closeButton).toBeVisible();
+
+    const backdrop = page.getByTestId("channel-shared-header-backdrop");
+    await expect(backdrop).toHaveCount(1);
+
+    // The pane is an isolated stacking context (`isolate`) that sits over the
+    // channel timeline. Its close button paints correctly only when the pane's
+    // own stacking level clears the shared-header backdrop it overlaps. Assert
+    // the pane both establishes that context and outranks the backdrop.
+    const pane = page.getByTestId("message-thread-panel");
+    const [paneIsolation, paneZIndex, backdropZIndex] = await Promise.all([
+      pane.evaluate((element) => getComputedStyle(element).isolation),
+      pane.evaluate((element) => Number(getComputedStyle(element).zIndex)),
+      backdrop.evaluate((element) => Number(getComputedStyle(element).zIndex)),
+    ]);
+
+    expect(paneIsolation).toBe("isolate");
+    expect(paneZIndex).toBeGreaterThan(backdropZIndex);
+  });
+});