diff --git a/desktop/src/features/home/ui/HomeView.tsx b/desktop/src/features/home/ui/HomeView.tsx
index cf2974c85..fcd13ddc1 100644
--- a/desktop/src/features/home/ui/HomeView.tsx
+++ b/desktop/src/features/home/ui/HomeView.tsx
@@ -47,7 +47,10 @@ import { useRemindLater } from "@/features/reminders/ui/RemindMeLaterProvider";
import { deleteMessage, sendChannelMessage } from "@/shared/api/tauri";
import type { HomeFeedResponse } from "@/shared/api/types";
import { KIND_REACTION } from "@/shared/constants/kinds";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
+import {
+ topChromeInset,
+ topChromeInsetHeaderBackdropClassName,
+} from "@/shared/layout/chromeLayout";
import { cn } from "@/shared/lib/cn";
import { resolveMentionNames } from "@/shared/lib/resolveMentionNames";
import { useElementWidth } from "@/shared/hooks/use-mobile";
@@ -435,6 +438,8 @@ export function HomeView({
-
+
-
+
diff --git a/desktop/src/shared/layout/chromeLayout.ts b/desktop/src/shared/layout/chromeLayout.ts
index 82ebdbb4e..2da71eba9 100644
--- a/desktop/src/shared/layout/chromeLayout.ts
+++ b/desktop/src/shared/layout/chromeLayout.ts
@@ -17,6 +17,15 @@ export const channelContentTopPaddingMeasurement = {
} as const;
/** Tailwind class fragments for content below the in-flow global top chrome. */
+export const topChromeInsetHeaderChromeClassName =
+ "bg-background/75 backdrop-blur-md supports-backdrop-filter:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/35";
+
+export const topChromeInsetHeaderBackdropClassName =
+ "before:bg-background/75 before:backdrop-blur-md supports-backdrop-filter:before:bg-background/65 dark:before:bg-background/45 dark:before:backdrop-blur-xl dark:supports-backdrop-filter:before:bg-background/35";
+
+export const topChromeInsetHeaderTransparentClassName =
+ "bg-transparent backdrop-blur-none supports-backdrop-filter:bg-transparent dark:bg-transparent dark:backdrop-blur-none dark:supports-backdrop-filter:bg-transparent";
+
export const topChromeInset = {
/** Absolute/fixed top offset inside the content row. */
top: "top-0",
@@ -28,8 +37,7 @@ export const topChromeInset = {
divider:
"before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/35 before:content-['']",
/** Shared header backdrop and bottom border below the inset row. */
- headerBase:
- "relative z-40 shrink-0 bg-background/75 backdrop-blur-md supports-backdrop-filter:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/35",
+ headerBase: `relative z-40 shrink-0 ${topChromeInsetHeaderChromeClassName}`,
/** Vertical pane divider starting at the top of the content row. */
verticalDivider:
"after:pointer-events-none after:absolute after:bottom-0 after:right-0 after:top-0 after:z-40 after:w-px after:bg-border/35 after:content-['']",
diff --git a/desktop/tests/e2e/home-collapsed-top-chrome.spec.ts b/desktop/tests/e2e/home-collapsed-top-chrome.spec.ts
index e6b83cc42..85119f1f3 100644
--- a/desktop/tests/e2e/home-collapsed-top-chrome.spec.ts
+++ b/desktop/tests/e2e/home-collapsed-top-chrome.spec.ts
@@ -4,6 +4,47 @@ import { waitForAnimations } from "../helpers/animations";
import { installMockBridge } from "../helpers/bridge";
test.describe("home inbox header collapsed-sidebar chrome clearance", () => {
+ test("inbox uses one continuous header backdrop across list and detail panes", async ({
+ page,
+ }) => {
+ await installMockBridge(page);
+ await page.goto("/");
+ await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+ await expect(page.getByTestId("home-inbox-detail")).toBeVisible();
+
+ const inboxBackdrop = await page
+ .getByTestId("home-inbox")
+ .evaluate((el) => {
+ const style = window.getComputedStyle(el, "::before");
+ return {
+ backdropFilter: style.backdropFilter || style.webkitBackdropFilter,
+ backgroundColor: style.backgroundColor,
+ height: style.height,
+ };
+ });
+ expect(inboxBackdrop.backdropFilter).toContain("blur");
+ expect(inboxBackdrop.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+ expect(Number.parseFloat(inboxBackdrop.height)).toBeGreaterThan(0);
+
+ const paneHeaderStyles = await page
+ .getByTestId("home-inbox")
+ .locator("[data-home-inbox-header]")
+ .evaluateAll((headers) =>
+ headers.map((header) => {
+ const style = window.getComputedStyle(header);
+ return {
+ backdropFilter: style.backdropFilter || style.webkitBackdropFilter,
+ backgroundColor: style.backgroundColor,
+ };
+ }),
+ );
+ expect(paneHeaderStyles).toHaveLength(2);
+ for (const style of paneHeaderStyles) {
+ expect(style.backdropFilter).toBe("none");
+ expect(style.backgroundColor).toBe("rgba(0, 0, 0, 0)");
+ }
+ });
+
test.use({ viewport: { width: 1280, height: 720 } });
test("inbox options clear the macOS traffic-light region when sidebar is collapsed", async ({