fix(desktop): back split thread headers (#7137)

## Summary
- render an auxiliary panel's requested header backdrop in docked/split
mode
- preserve explicit transparent-backdrop behavior
- cover a populated, scrolled thread pane so timeline content cannot
bleed through its header

## Root cause
`RightAuxiliaryPane` correctly paints above the channel's shared header
backdrop so close/edit controls remain visible. The docked
`AuxiliaryPanelHeader` branch, however, ignored its `backdrop` request,
leaving scrolled thread content in that higher stacking context
unbacked.

## Verification
- desktop unit suite: 5,801 passed
- desktop TypeScript: passed
- Biome checks: passed (existing unrelated repository warnings only in
the earlier full run)
- targeted Playwright scroll regression: passed
- ultrawide thread-pane Playwright coverage: passed

Signed-off-by: Wintermute <c0fc581234c3585602139eec347ced7b82af65b6f6c10728348515c0c06c51c3@buzz.block.builderlab.xyz>
Co-authored-by: Wintermute <c0fc581234c3585602139eec347ced7b82af65b6f6c10728348515c0c06c51c3@buzz.block.builderlab.xyz>

Author: thomaspblock

desktop/src/shared/layout/AuxiliaryPanelHeader.tsx

@@ -99,6 +99,7 @@ function AuxiliaryPanelHeaderBackdrop({
         "pointer-events-none absolute inset-x-0 top-0 z-40 h-13",
         getAuxiliaryPanelSurfaceClass(surface),
       )}
+      data-testid="auxiliary-panel-header-backdrop"
     />
   );
 }
@@ -166,25 +167,30 @@ export function AuxiliaryPanelHeader({
   }
 
   return (
-    <div
-      className={cn(
-        "pointer-events-none relative z-40 overflow-visible",
-        getAuxiliaryPanelSurfaceClass(
-          resolvedTransparent ? "transparent" : surface,
-        ),
-        channelChrome.negativeMargin,
-      )}
-      {...props}
-    >
+    <>
+      {backdrop && backdropSurface !== "transparent" ? (
+        <AuxiliaryPanelHeaderBackdrop surface={backdropSurface} />
+      ) : null}
       <div
-        className="pointer-events-auto relative z-40 shrink-0 cursor-default select-none py-2 pl-5 pr-3"
-        data-tauri-drag-region
+        className={cn(
+          "pointer-events-none relative z-40 overflow-visible",
+          getAuxiliaryPanelSurfaceClass(
+            resolvedTransparent ? "transparent" : surface,
+          ),
+          channelChrome.negativeMargin,
+        )}
+        {...props}
       >
-        <div className="flex h-9 min-w-0 items-center gap-2.5">
-          {renderAuxiliaryPanelHeaderContent(children)}
+        <div
+          className="pointer-events-auto relative z-40 shrink-0 cursor-default select-none py-2 pl-5 pr-3"
+          data-tauri-drag-region
+        >
+          <div className="flex h-9 min-w-0 items-center gap-2.5">
+            {renderAuxiliaryPanelHeaderContent(children)}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 

desktop/src/shared/layout/auxiliaryPanelContext.test.mjs

@@ -177,6 +177,54 @@ test("AuxiliaryPanelHeader renders a generic close action from context", () => {
   assert.match(html, /data-testid="auxiliary-panel-close"/);
 });
 
+test("AuxiliaryPanelHeader adds its requested backdrop in docked mode", () => {
+  const html = render(
+    React.createElement(
+      AuxiliaryPanel,
+      {
+        header: React.createElement(
+          AuxiliaryPanelHeader,
+          { backdrop: true },
+          React.createElement(AuxiliaryPanelHeaderGroup, null, "Title"),
+        ),
+        layout: "split",
+        onClose: () => {},
+        widthPx: 420,
+      },
+      "Panel",
+    ),
+  );
+
+  assert.match(html, /data-testid="auxiliary-panel-header-backdrop"/);
+  assert.match(html, /pointer-events-none absolute inset-x-0 top-0 z-40 h-13/);
+});
+
+test("AuxiliaryPanelHeader honors an explicit transparent docked backdrop", () => {
+  const html = render(
+    React.createElement(
+      AuxiliaryPanel,
+      {
+        header: React.createElement(
+          AuxiliaryPanelHeader,
+          { backdrop: true, backdropSurface: "transparent" },
+          React.createElement(AuxiliaryPanelHeaderGroup, null, "Title"),
+        ),
+        layout: "split",
+        onClose: () => {},
+        transparentChrome: true,
+        widthPx: 420,
+      },
+      "Panel",
+    ),
+  );
+
+  assert.doesNotMatch(html, /data-testid="auxiliary-panel-header-backdrop"/);
+  assert.doesNotMatch(
+    html,
+    /pointer-events-none absolute inset-x-0 top-0 z-40 h-13/,
+  );
+});
+
 test("AuxiliaryPanelHeader keeps resize border in single-panel mode when requested", () => {
   const html = render(
     React.createElement(

desktop/tests/e2e/channel-shared-header-backdrop.spec.ts

@@ -41,7 +41,7 @@ async function waitForMockLiveSubscription(
 test.describe("channel shared header backdrop", () => {
   test.use({ viewport: { width: 1280, height: 720 } });
 
-  test("spans channel and split auxiliary columns with one backdrop", async ({
+  test("backs a scrolled split auxiliary header above the shared channel backdrop", async ({
     page,
   }) => {
     await installMockBridge(page);
@@ -82,6 +82,43 @@ test.describe("channel shared header backdrop", () => {
     await replyButton.click({ force: true });
     await expect(page.getByTestId("message-thread-panel")).toBeVisible();
 
+    await page.evaluate(
+      ({ channelName, parentEventId, pubkey }) => {
+        for (let index = 0; index < 24; index += 1) {
+          (window as MockMessageWindow).__BUZZ_E2E_EMIT_MOCK_MESSAGE__?.({
+            channelName,
+            content: `Scrollable thread reply ${index + 1}. `.repeat(4),
+            parentEventId,
+            pubkey,
+          });
+        }
+      },
+      {
+        channelName: CHANNEL_NAME,
+        parentEventId: rootId,
+        pubkey: ALICE_PUBKEY,
+      },
+    );
+
+    const threadBody = page.getByTestId("message-thread-body");
+    await expect
+      .poll(() =>
+        threadBody.evaluate(
+          (element) => element.scrollHeight > element.clientHeight,
+        ),
+      )
+      .toBe(true);
+    await threadBody.evaluate((element) => {
+      element.scrollTop = element.scrollHeight;
+      element.dispatchEvent(new Event("scroll"));
+    });
+    await expect
+      .poll(() => threadBody.evaluate((element) => element.scrollTop))
+      .toBeGreaterThan(0);
+
+    const paneBackdrop = page.getByTestId("auxiliary-panel-header-backdrop");
+    await expect(paneBackdrop).toHaveCount(1);
+
     const sharedBackdrop = page.getByTestId("channel-shared-header-backdrop");
     await expect(sharedBackdrop).toHaveCount(1);
 
@@ -93,6 +130,9 @@ test.describe("channel shared header backdrop", () => {
     const [
       hostBox,
       backdropBox,
+      paneBackdropBox,
+      paneBackdropBackground,
+      paneBackdropFilter,
       backdropFilter,
       backdropZIndex,
       headerZIndex,
@@ -101,6 +141,13 @@ test.describe("channel shared header backdrop", () => {
     ] = await Promise.all([
       page.getByTestId("channel-drop-zone").locator("..").boundingBox(),
       sharedBackdrop.boundingBox(),
+      paneBackdrop.boundingBox(),
+      paneBackdrop.evaluate(
+        (element) => getComputedStyle(element).backgroundColor,
+      ),
+      paneBackdrop.evaluate(
+        (element) => getComputedStyle(element).backdropFilter,
+      ),
       sharedBackdrop.evaluate(
         (element) => getComputedStyle(element).backdropFilter,
       ),
@@ -120,6 +167,13 @@ test.describe("channel shared header backdrop", () => {
 
     expect(hostBox).not.toBeNull();
     expect(backdropBox).not.toBeNull();
+    expect(paneBackdropBox).not.toBeNull();
+    expect(Math.round(paneBackdropBox?.y ?? 0)).toBe(
+      Math.round(backdropBox?.y ?? 0),
+    );
+    expect(Math.round(paneBackdropBox?.height ?? 0)).toBe(52);
+    expect(paneBackdropBackground).not.toBe("rgba(0, 0, 0, 0)");
+    expect(paneBackdropFilter).not.toBe("none");
     expect(Math.round(backdropBox?.x ?? 0)).toBe(Math.round(hostBox?.x ?? 0));
     expect(Math.round(backdropBox?.width ?? 0)).toBe(
       Math.round(hostBox?.width ?? 0),