From 8ff1c8bc00111fd6ed3748c2e2c65010cfd6d681 Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Tue, 26 May 2026 09:44:59 -0400
Subject: [PATCH] fix: refine topbar header layering

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 desktop/src/app/AppHeaderControls.tsx                   | 2 +-
 desktop/src/features/chat/ui/ChatHeader.tsx             | 4 +---
 desktop/src/features/messages/ui/MessageThreadPanel.tsx | 4 ++--
 desktop/src/features/search/ui/TopbarSearch.tsx         | 2 +-
 desktop/src/features/sidebar/ui/AppSidebar.tsx          | 2 +-
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/desktop/src/app/AppHeaderControls.tsx b/desktop/src/app/AppHeaderControls.tsx
index c422b0679..5c5946b1a 100644
--- a/desktop/src/app/AppHeaderControls.tsx
+++ b/desktop/src/app/AppHeaderControls.tsx
@@ -30,7 +30,7 @@ export function AppHeaderControls({
 }: AppHeaderControlsProps) {
   return (
     <>
-      <div className="pointer-events-none fixed inset-x-0 top-0 z-20 h-20 bg-background/35 backdrop-blur-2xl backdrop-saturate-150 [mask-image:linear-gradient(to_bottom,black_0%,black_45%,transparent_100%)] supports-[backdrop-filter]:bg-background/25 [-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_45%,transparent_100%)]" />
+      <div className="pointer-events-none fixed inset-x-0 top-0 z-20 h-[84px] bg-background/70 backdrop-blur-xl supports-[backdrop-filter]:bg-background/55" />
 
       <div className="pointer-events-none fixed inset-x-0 top-0 z-[70] h-10">
         <div className="pointer-events-auto absolute left-[80px] top-[9px] flex items-center gap-0.5">
diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index b635ccbe2..dcc48f792 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -103,14 +103,12 @@ export function ChatHeader({
       {topbarActions}
       <header
         className={cn(
-          "relative z-30 flex min-h-[44px] min-w-0 shrink-0 cursor-default select-none items-center gap-[10px] py-[6px] pl-[16px] pr-[8px] transition-[margin,padding] duration-200 ease-linear sm:pl-[24px] sm:pr-[12px]",
+          "relative z-30 mt-10 flex min-h-[44px] min-w-0 shrink-0 cursor-default select-none items-center gap-[10px] py-[6px] pl-[16px] pr-[8px] transition-[margin,padding] duration-200 ease-linear sm:pl-[24px] sm:pr-[12px]",
           overlaysContent && "-mb-[44px]",
         )}
         data-testid="chat-header"
         data-tauri-drag-region
       >
-        <div className="pointer-events-none absolute inset-0 bg-background/70 backdrop-blur-xl [mask-image:linear-gradient(to_bottom,black_0%,transparent_100%)] supports-[backdrop-filter]:bg-background/55 [-webkit-mask-image:linear-gradient(to_bottom,black_0%,transparent_100%)]" />
-
         <div className="relative z-10 min-w-0 flex-1">
           <div className="flex min-w-0 flex-wrap items-center gap-[4px]">
             <ChannelIcon
diff --git a/desktop/src/features/messages/ui/MessageThreadPanel.tsx b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
index 615f76e59..544d49a78 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanel.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
@@ -176,14 +176,14 @@ export function MessageThreadPanel({
         )}
 
         <div className="pointer-events-none absolute inset-x-0 top-0 z-30 flex min-h-[44px] items-center gap-3 px-4 py-[6px]">
-          <div className="min-w-0 flex-1">
+          <div className="relative z-10 min-w-0 flex-1">
             <h2 className="text-sm font-semibold tracking-tight text-foreground">
               Thread
             </h2>
           </div>
           <Button
             aria-label="Close thread"
-            className="pointer-events-auto h-7 w-7"
+            className="pointer-events-auto relative z-10 h-7 w-7"
             data-testid="message-thread-close"
             onClick={onClose}
             size="icon"
diff --git a/desktop/src/features/search/ui/TopbarSearch.tsx b/desktop/src/features/search/ui/TopbarSearch.tsx
index ebecd2263..ff02ca385 100644
--- a/desktop/src/features/search/ui/TopbarSearch.tsx
+++ b/desktop/src/features/search/ui/TopbarSearch.tsx
@@ -185,7 +185,7 @@ export function TopbarSearch({
 
   return (
     <div className="relative">
-      <div className="flex h-7 items-center gap-2 rounded-lg border border-border/70 bg-background/75 px-2.5 shadow-sm backdrop-blur">
+      <div className="flex h-7 items-center gap-2 rounded-lg border border-border/70 bg-background/60 px-2.5 shadow-sm backdrop-blur-xl backdrop-saturate-150 supports-[backdrop-filter]:bg-background/45">
         <Search className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
         <Input
           aria-label="Search Sprout"
diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx
index deb9b405d..9ab745f98 100644
--- a/desktop/src/features/sidebar/ui/AppSidebar.tsx
+++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx
@@ -453,7 +453,7 @@ export function AppSidebar({
 
   return (
     <Sidebar
-      className="!border-r-0"
+      className="z-30 !border-r-0"
       collapsible="offcanvas"
       data-testid="app-sidebar"
       variant="sidebar"