Fix collapsed home header chrome overlap (#1215)

Signed-off-by: Thomas Petersen <thomasp@squareup.com>

desktop/playwright.config.ts

@@ -47,6 +47,7 @@ export default defineConfig({
         "**/relay-connectivity-screenshots.spec.ts",
         "**/unread-pill-screenshots.spec.ts",
         "**/sidebar-more-unread-overlap.spec.ts",
+        "**/home-collapsed-top-chrome-screenshots.spec.ts",
         "**/thread-unread-screenshots.spec.ts",
         "**/animated-avatar-screenshots.spec.ts",
         "**/reminders-screenshots.spec.ts",

desktop/src/features/home/ui/InboxListPane.tsx

@@ -16,6 +16,7 @@ import {
 import { RemindersPanel } from "@/features/reminders/ui/RemindersPanel";
 import { TopChromeInsetHeader } from "@/shared/layout/TopChromeInsetHeader";
 import { cn } from "@/shared/lib/cn";
+import { useOptionalSidebar } from "@/shared/ui/sidebar";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -131,6 +132,9 @@ export function InboxListPane({
   reminderPubkey,
   unreadOnly,
 }: InboxListPaneProps) {
+  const sidebar = useOptionalSidebar();
+  const clearCollapsedTopChromeControls =
+    sidebar?.state === "collapsed" && !sidebar.isMobile;
   const activeFilter = FILTER_OPTIONS.find((option) => option.value === filter);
   const isReminders = filter === "reminders";
   const scrollRef = React.useRef<HTMLDivElement>(null);
@@ -325,7 +329,12 @@ export function InboxListPane({
       )}
     >
       <TopChromeInsetHeader flush>
-        <div className="px-3 py-1">
+        <div
+          className={cn(
+            "px-3 py-1 transition-[padding] duration-200 ease-linear",
+            clearCollapsedTopChromeControls && "pl-[168px]",
+          )}
+        >
           <div className="flex w-full min-w-0 items-center justify-between gap-3">
             <Popover>
               <PopoverTrigger asChild>

desktop/tests/e2e/home-collapsed-top-chrome-screenshots.spec.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "@playwright/test";
+
+import { waitForAnimations } from "../helpers/animations";
+import { installMockBridge } from "../helpers/bridge";
+
+const SHOTS = "test-results/home-collapsed-top-chrome";
+
+test.describe("home inbox header collapsed-sidebar chrome clearance", () => {
+  test.use({ viewport: { width: 1280, height: 720 } });
+
+  test("inbox options clear the macOS traffic-light region when sidebar is collapsed", async ({
+    page,
+  }) => {
+    await installMockBridge(page);
+    await page.goto("/");
+    await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+
+    await page.locator('[data-sidebar="trigger"]').click();
+
+    const inboxOptions = page.getByTestId("inbox-options-trigger");
+    await expect(inboxOptions).toBeVisible();
+    await expect
+      .poll(async () =>
+        inboxOptions.evaluate((element) =>
+          Math.round(element.getBoundingClientRect().left),
+        ),
+      )
+      .toBeGreaterThanOrEqual(168);
+
+    await waitForAnimations(page);
+    await page.screenshot({
+      path: `${SHOTS}/01-collapsed-inbox-header-clears-traffic-lights.png`,
+      clip: { x: 0, y: 0, width: 420, height: 120 },
+    });
+  });
+});