From 092546495d73d305e4d0226ee14bf0d5de4d2f53 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Wed, 24 Jun 2026 20:54:05 +0100
Subject: [PATCH] Polish desktop navigation chrome (#1238)

---
 desktop/src-tauri/tauri.conf.json             |  4 +-
 desktop/src/app/AppShell.tsx                  | 98 ++++++++++---------
 desktop/src/app/AppTopChrome.tsx              | 58 ++++-------
 desktop/src/features/agents/ui/AgentsView.tsx |  9 +-
 .../channels/ui/AgentSessionThreadPanel.tsx   |  8 +-
 desktop/src/features/chat/ui/ChatHeader.tsx   | 85 ++++++++--------
 .../src/features/home/ui/HomeLoadingState.tsx |  4 +-
 desktop/src/features/home/ui/HomeView.tsx     |  7 +-
 .../src/features/home/ui/InboxDetailPane.tsx  |  2 +-
 .../src/features/home/ui/InboxListPane.tsx    | 13 +--
 .../messages/ui/MessageThreadPanel.tsx        | 12 +--
 .../features/profile/ui/UserProfilePanel.tsx  | 10 +-
 .../projects/ui/ProjectDetailScreen.tsx       |  9 +-
 .../src/features/projects/ui/ProjectsView.tsx |  9 +-
 desktop/src/features/pulse/ui/PulseTabBar.tsx |  2 +-
 .../src/features/search/ui/TopbarSearch.tsx   |  2 +-
 .../src/features/settings/ui/SettingsView.tsx |  6 +-
 .../src/features/sidebar/ui/AppSidebar.tsx    |  4 +-
 .../workflows/ui/WorkflowDetailPanel.tsx      |  2 +-
 .../features/workflows/ui/WorkflowsView.tsx   |  7 +-
 .../shared/layout/AuxiliaryPanelHeader.tsx    |  6 +-
 .../shared/layout/TopChromeInsetHeader.tsx    |  7 +-
 desktop/src/shared/layout/chromeLayout.ts     | 22 ++---
 desktop/src/shared/ui/ViewLoadingFallback.tsx | 43 +++-----
 desktop/src/shared/ui/sidebar.tsx             |  2 +-
 .../e2e/sidebar-more-unread-overlap.spec.ts   | 55 ++++-------
 26 files changed, 198 insertions(+), 288 deletions(-)

diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
index 1043c8240d..2d8b54a7a1 100644
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@@ -25,8 +25,8 @@
         "hiddenTitle": true,
         "dragDropEnabled": false,
         "trafficLightPosition": {
-          "x": 12,
-          "y": 22
+          "x": 16,
+          "y": 24
         },
         "backgroundThrottling": "disabled",
         "minWidth": 800,
diff --git a/desktop/src/app/AppShell.tsx b/desktop/src/app/AppShell.tsx
index afa5f3ea89..05babfa6c1 100644
--- a/desktop/src/app/AppShell.tsx
+++ b/desktop/src/app/AppShell.tsx
@@ -768,7 +768,7 @@ export function AppShell() {
                     isHuddleDrawerOpen && "buzz-huddle-app-surface-open",
                   )}
                 >
-                  <SidebarProvider className="min-h-0 flex-1 overflow-hidden">
+                  <SidebarProvider className="min-h-0 flex-1 flex-col overflow-hidden">
                     {!settingsOpen ? (
                       <AppTopChrome
                         canGoBack={canGoBack}
@@ -778,45 +778,49 @@ export function AppShell() {
                       />
                     ) : null}
                     {settingsOpen ? (
-                      <React.Suspense fallback={null}>
-                        <LazySettingsScreen
-                          currentPubkey={identityQuery.data?.pubkey}
-                          fallbackDisplayName={identityQuery.data?.displayName}
-                          isUpdatingDesktopNotifications={
-                            notificationSettings.isUpdatingDesktopEnabled
-                          }
-                          notificationErrorMessage={
-                            notificationSettings.errorMessage
-                          }
-                          notificationPermission={
-                            notificationSettings.permission
-                          }
-                          notificationSettings={notificationSettings.settings}
-                          onClose={handleCloseSettings}
-                          onSectionChange={handleSettingsSectionChange}
-                          onSetDesktopNotificationsEnabled={
-                            notificationSettings.setDesktopEnabled
-                          }
-                          onSetHomeBadgeEnabled={
-                            notificationSettings.setHomeBadgeEnabled
-                          }
-                          onSetSlotAlertsEnabled={
-                            notificationSettings.setSlotAlertsEnabled
-                          }
-                          onSetNotifyWhileViewing={
-                            notificationSettings.setNotifyWhileViewing
-                          }
-                          onSetAllSlotAlertsEnabled={
-                            notificationSettings.setAllSlotAlertsEnabled
-                          }
-                          onSetSoundForSlot={
-                            notificationSettings.setSoundForSlot
-                          }
-                          section={settingsSection}
-                        />
-                      </React.Suspense>
+                      <div className="flex min-h-0 flex-1 overflow-hidden">
+                        <React.Suspense fallback={null}>
+                          <LazySettingsScreen
+                            currentPubkey={identityQuery.data?.pubkey}
+                            fallbackDisplayName={
+                              identityQuery.data?.displayName
+                            }
+                            isUpdatingDesktopNotifications={
+                              notificationSettings.isUpdatingDesktopEnabled
+                            }
+                            notificationErrorMessage={
+                              notificationSettings.errorMessage
+                            }
+                            notificationPermission={
+                              notificationSettings.permission
+                            }
+                            notificationSettings={notificationSettings.settings}
+                            onClose={handleCloseSettings}
+                            onSectionChange={handleSettingsSectionChange}
+                            onSetDesktopNotificationsEnabled={
+                              notificationSettings.setDesktopEnabled
+                            }
+                            onSetHomeBadgeEnabled={
+                              notificationSettings.setHomeBadgeEnabled
+                            }
+                            onSetSlotAlertsEnabled={
+                              notificationSettings.setSlotAlertsEnabled
+                            }
+                            onSetNotifyWhileViewing={
+                              notificationSettings.setNotifyWhileViewing
+                            }
+                            onSetAllSlotAlertsEnabled={
+                              notificationSettings.setAllSlotAlertsEnabled
+                            }
+                            onSetSoundForSlot={
+                              notificationSettings.setSoundForSlot
+                            }
+                            section={settingsSection}
+                          />
+                        </React.Suspense>
+                      </div>
                     ) : (
-                      <>
+                      <div className="flex min-h-0 flex-1 overflow-hidden">
                         <AppSidebar
                           activeWorkspace={workspacesHook.activeWorkspace}
                           channels={sidebarChannels}
@@ -951,22 +955,22 @@ export function AppShell() {
                           onStarChannel={starChannel}
                           onUnstarChannel={unstarChannel}
                         />
-
                         <MainInsetProvider mainInsetRef={mainInsetRef}>
                           <SidebarInset
                             ref={mainInsetRef}
-                            className="min-h-0 min-w-0 overflow-hidden"
+                            className="isolate min-h-0 min-w-0 overflow-hidden bg-sidebar"
                             style={chromeCssVarDefaults}
                           >
-                            <ConnectionBanner
-                              errorMessage={channelsErrorMessage}
-                            />
-                            <Outlet />
+                            <div className="relative z-10 ml-px mt-px flex min-h-0 flex-1 flex-col overflow-hidden rounded-tl-xl bg-background shadow-[-1px_-1px_0_0_hsl(var(--sidebar-border)/0.45)]">
+                              <ConnectionBanner
+                                errorMessage={channelsErrorMessage}
+                              />
+                              <Outlet />
+                            </div>
                           </SidebarInset>
                         </MainInsetProvider>
-                      </>
+                      </div>
                     )}
-
                     <AppShellOverlays
                       activeChannel={activeChannel}
                       browseDialogType={browseDialogType}
diff --git a/desktop/src/app/AppTopChrome.tsx b/desktop/src/app/AppTopChrome.tsx
index 256bd8d8e3..974fa73a89 100644
--- a/desktop/src/app/AppTopChrome.tsx
+++ b/desktop/src/app/AppTopChrome.tsx
@@ -4,12 +4,12 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
 } from "lucide-react";
-import * as React from "react";
 
 import { isMacPlatform } from "@/shared/lib/platform";
 import { useIsFullscreen } from "@/shared/lib/useIsFullscreen";
 import { Button } from "@/shared/ui/button";
 import { cn } from "@/shared/lib/cn";
+import { topChromeBackdrop } from "@/shared/layout/chromeLayout";
 import { useOptionalSidebar } from "@/shared/ui/sidebar";
 
 type AppTopChromeProps = {
@@ -20,8 +20,7 @@ type AppTopChromeProps = {
 };
 
 const TOP_CHROME_ICON_BUTTON_CLASS =
-  "h-7 w-7 rounded-[4px] text-muted-foreground/70 hover:bg-border/45 hover:text-foreground [&_svg]:size-4";
-const TOP_CHROME_WHEEL_GUARD_HEIGHT = 40;
+  "h-7 w-7 rounded-[4px] text-sidebar-foreground/65 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&_svg]:size-4";
 
 function TopChromeSidebarTrigger() {
   const sidebar = useOptionalSidebar();
@@ -52,42 +51,25 @@ export function AppTopChrome({
   onGoForward,
 }: AppTopChromeProps) {
   const isFullscreen = useIsFullscreen();
-  // On macOS the traffic-light buttons overlay the chrome at x≈12 (see
-  // `trafficLightPosition` in `tauri.conf.json`), so the nav row sits at
-  // `left-[80px]` to clear them. In fullscreen those buttons hide, so shift
-  // the row back to the standard left inset.
-  const navRowLeftClass =
-    isMacPlatform() && isFullscreen ? "left-[12px]" : "left-[80px]";
-
-  React.useEffect(() => {
-    const handleWheel = (event: WheelEvent) => {
-      if (event.clientY <= TOP_CHROME_WHEEL_GUARD_HEIGHT) {
-        event.preventDefault();
-      }
-    };
-
-    document.addEventListener("wheel", handleWheel, {
-      capture: true,
-      passive: false,
-    });
-    return () => {
-      document.removeEventListener("wheel", handleWheel, { capture: true });
-    };
-  }, []);
+  // On macOS the traffic-light buttons overlay the chrome (see
+  // `trafficLightPosition` in `tauri.conf.json`), so the nav row clears their
+  // x-position and shifts to align the nav icon centers with the native dot
+  // centers. In fullscreen those buttons hide, so use the standard alignment.
+  const navRowPaddingClass =
+    isMacPlatform() && !isFullscreen ? "pl-20" : "pl-3";
+  const navRowAlignmentClass =
+    isMacPlatform() && !isFullscreen ? "translate-y-[3px]" : null;
 
   return (
-    <>
-      <div
-        aria-hidden="true"
-        className="fixed inset-x-0 top-0 z-20 h-10 cursor-default select-none"
-        data-tauri-drag-region
-      />
-      <div
-        className={cn(
-          "fixed top-[6px] z-45 flex items-center gap-0.5",
-          navRowLeftClass,
-        )}
-      >
+    <div
+      className={cn(
+        "relative z-45 flex shrink-0 cursor-default select-none items-center bg-sidebar pr-3 text-sidebar-foreground",
+        topChromeBackdrop.height,
+        navRowPaddingClass,
+      )}
+      data-tauri-drag-region
+    >
+      <div className={cn("flex items-center gap-0.5", navRowAlignmentClass)}>
         <TopChromeSidebarTrigger />
         <Button
           aria-label="Go back"
@@ -112,6 +94,6 @@ export function AppTopChrome({
           <ChevronRight />
         </Button>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/desktop/src/features/agents/ui/AgentsView.tsx b/desktop/src/features/agents/ui/AgentsView.tsx
index 53a1fc5d65..44088d490e 100644
--- a/desktop/src/features/agents/ui/AgentsView.tsx
+++ b/desktop/src/features/agents/ui/AgentsView.tsx
@@ -1,6 +1,4 @@
 import * as React from "react";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
-import { cn } from "@/shared/lib/cn";
 import {
   consumePendingOpenCreateAgent,
   subscribeOpenCreateAgent,
@@ -59,12 +57,7 @@ export function AgentsView() {
 
   return (
     <>
-      <div
-        className={cn(
-          "flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 sm:px-6",
-          topChromeInset.padding,
-        )}
-      >
+      <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-4 sm:px-6">
         <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
           <div className="flex flex-col gap-6">
             <UnifiedAgentsSection
diff --git a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
index e858535a39..ab9712811f 100644
--- a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
+++ b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
@@ -150,7 +150,7 @@ export function AgentSessionThreadPanel({
       className={cn(
         "min-h-0 flex-1 overflow-y-auto px-3 pb-4",
         isSplitLayout && auxiliaryPanelContentPaddingClass,
-        !isSplitLayout && (isOverlay ? "pt-4" : "pt-[4.75rem]"),
+        !isSplitLayout && (isFloatingOverlay ? "pt-4" : "pt-[3.25rem]"),
       )}
     >
       <ManagedAgentSessionPanel
@@ -193,7 +193,7 @@ export function AgentSessionThreadPanel({
         {!isOverlay ? (
           <div
             aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 top-0 z-40 h-[4.75rem] bg-background/75 backdrop-blur-md before:absolute before:left-0 before:right-0 before:top-10 before:h-px before:bg-border/35 supports-[backdrop-filter]:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/35"
+            className="pointer-events-none absolute inset-x-0 top-0 z-40 h-[3.25rem] 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"
           />
         ) : null}
 
@@ -201,8 +201,8 @@ export function AgentSessionThreadPanel({
           className={cn(
             "flex cursor-default select-none items-center",
             isSinglePanelView
-              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[4.75rem] min-h-[4.75rem] shrink-0 gap-2.5 bg-background/80 pb-1 pl-4 pr-2 pt-[2.625rem] backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:pl-6 sm:pr-3 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55`
-              : "relative z-50 min-h-14 shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55",
+              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[3.25rem] min-h-[3.25rem] shrink-0 gap-2.5 bg-background/80 px-4 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:pl-6 sm:pr-3 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55`
+              : "relative z-50 min-h-[3.25rem] shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55",
           )}
           data-tauri-drag-region
         >
diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index 5cbc8ec204..39d8b46dc7 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -18,7 +18,6 @@ import { UpdateIndicator } from "@/features/settings/UpdateIndicator";
 import { cn } from "@/shared/lib/cn";
 import { channelChrome } from "@/shared/layout/chromeLayout";
 import { Button } from "@/shared/ui/button";
-import { useOptionalSidebar } from "@/shared/ui/sidebar";
 
 type ChatHeaderProps = {
   actions?: React.ReactNode;
@@ -96,9 +95,6 @@ export function ChatHeader({
   statusBadge,
 }: ChatHeaderProps) {
   const trimmedDescription = description?.trim() ?? "";
-  const sidebar = useOptionalSidebar();
-  const clearCollapsedTopChromeControls =
-    belowSystemChrome && sidebar?.state === "collapsed" && !sidebar.isMobile;
 
   async function handleCopyTitle() {
     const value = title.trim();
@@ -115,53 +111,54 @@ export function ChatHeader({
   const header = (
     <header
       className={cn(
-        "pointer-events-auto relative z-30 flex min-h-14 min-w-0 shrink-0 cursor-default select-none items-center gap-2.5 bg-transparent px-5 py-2 transition-[margin,padding] duration-200 ease-linear",
+        "pointer-events-auto relative z-30 min-w-0 shrink-0 cursor-default select-none bg-transparent px-5 py-2 transition-[margin,padding] duration-200 ease-linear",
         overlaysContent && !belowSystemChrome && "-mb-14",
-        clearCollapsedTopChromeControls && "pl-[176px]",
       )}
       data-testid="chat-header"
       data-tauri-drag-region
     >
-      <div className="min-w-0 flex-1">
-        <div className="group/title flex min-w-0 items-center gap-[4px] overflow-hidden">
-          <div className="shrink-0">
-            {leadingContent ?? (
-              <ChannelIcon
-                channelType={channelType}
-                mode={mode}
-                visibility={visibility}
-              />
-            )}
-          </div>
-          <h1
-            className="min-w-0 translate-y-px truncate text-base font-semibold leading-6 tracking-tight"
-            data-testid="chat-title"
-            title={trimmedDescription || undefined}
-          >
-            {title}
-          </h1>
-          <Button
-            aria-label={`Copy channel name: ${title}`}
-            className="h-6 w-6 shrink-0 opacity-0 text-muted-foreground transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover/title:opacity-100"
-            onClick={() => void handleCopyTitle()}
-            size="icon-xs"
-            title="Copy channel name"
-            type="button"
-            variant="ghost"
-          >
-            <Copy className="h-3.5 w-3.5" />
-          </Button>
-          {statusBadge ? (
-            <div className="flex shrink-0 flex-wrap items-center gap-1">
-              {statusBadge}
+      <div className="flex h-9 min-w-0 items-center gap-2.5">
+        <div className="min-w-0 flex-1">
+          <div className="group/title flex min-w-0 items-center gap-[4px] overflow-hidden">
+            <div className="shrink-0">
+              {leadingContent ?? (
+                <ChannelIcon
+                  channelType={channelType}
+                  mode={mode}
+                  visibility={visibility}
+                />
+              )}
             </div>
-          ) : null}
+            <h1
+              className="min-w-0 translate-y-px truncate text-base font-semibold leading-6 tracking-tight"
+              data-testid="chat-title"
+              title={trimmedDescription || undefined}
+            >
+              {title}
+            </h1>
+            <Button
+              aria-label={`Copy channel name: ${title}`}
+              className="h-6 w-6 shrink-0 opacity-0 text-muted-foreground transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover/title:opacity-100"
+              onClick={() => void handleCopyTitle()}
+              size="icon-xs"
+              title="Copy channel name"
+              type="button"
+              variant="ghost"
+            >
+              <Copy className="h-3.5 w-3.5" />
+            </Button>
+            {statusBadge ? (
+              <div className="flex shrink-0 flex-wrap items-center gap-1">
+                {statusBadge}
+              </div>
+            ) : null}
+          </div>
         </div>
-      </div>
 
-      <div className="flex shrink-0 items-center gap-1">
-        <UpdateIndicator />
-        {actions ? <div className="shrink-0">{actions}</div> : null}
+        <div className="flex shrink-0 items-center gap-1">
+          <UpdateIndicator />
+          {actions ? <div className="shrink-0">{actions}</div> : null}
+        </div>
       </div>
     </header>
   );
@@ -174,7 +171,7 @@ export function ChatHeader({
     <div
       ref={chromeWrapperRef}
       className={cn(
-        "pointer-events-none relative z-30 bg-background/80 backdrop-blur-md after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border/35 after:content-[''] supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
+        "pointer-events-none relative z-30 overflow-hidden rounded-tl-xl bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
         channelChrome.negativeMargin,
       )}
     >
diff --git a/desktop/src/features/home/ui/HomeLoadingState.tsx b/desktop/src/features/home/ui/HomeLoadingState.tsx
index 8fee6b800f..cbf744279a 100644
--- a/desktop/src/features/home/ui/HomeLoadingState.tsx
+++ b/desktop/src/features/home/ui/HomeLoadingState.tsx
@@ -6,7 +6,7 @@ export function HomeLoadingState() {
       <div className="grid h-full min-h-0 w-full lg:grid-cols-[320px_minmax(0,1fr)]">
         <div className="relative overflow-hidden bg-background/60 after:absolute after:bottom-0 after:right-0 after:top-10 after:w-px after:bg-border/70 after:content-['']">
           <div className="px-5 py-2">
-            <div className="flex min-h-10 min-w-0 items-center justify-between gap-3">
+            <div className="flex min-h-9 min-w-0 items-center justify-between gap-3">
               <div className="flex min-w-0 items-center gap-[6px]">
                 <Skeleton className="h-4 w-4 shrink-0 rounded-md" />
                 <Skeleton className="h-4 w-14" />
@@ -52,7 +52,7 @@ export function HomeLoadingState() {
 
         <div className="relative flex min-h-0 flex-col overflow-hidden bg-background/60">
           <div className="px-5 py-2">
-            <div className="flex min-h-10 min-w-0 items-center justify-between gap-3">
+            <div className="flex min-h-9 min-w-0 items-center justify-between gap-3">
               <div className="flex min-w-0 items-center gap-[4px]">
                 <Skeleton className="h-4 w-4 shrink-0 rounded-md" />
                 <Skeleton className="h-4 w-40" />
diff --git a/desktop/src/features/home/ui/HomeView.tsx b/desktop/src/features/home/ui/HomeView.tsx
index 7d8c53395c..73e5ea33f4 100644
--- a/desktop/src/features/home/ui/HomeView.tsx
+++ b/desktop/src/features/home/ui/HomeView.tsx
@@ -336,12 +336,7 @@ export function HomeView({
 
   if (!feed) {
     return (
-      <div
-        className={cn(
-          "flex-1 overflow-hidden px-4 pb-3 sm:px-6",
-          topChromeInset.padding,
-        )}
-      >
+      <div className="flex-1 overflow-hidden px-4 pb-3 pt-4 sm:px-6">
         <div className="flex w-full max-w-3xl flex-col gap-4">
           <div className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-5">
             <p className="text-base font-semibold tracking-tight">
diff --git a/desktop/src/features/home/ui/InboxDetailPane.tsx b/desktop/src/features/home/ui/InboxDetailPane.tsx
index 0b74041cae..8b1dca95e1 100644
--- a/desktop/src/features/home/ui/InboxDetailPane.tsx
+++ b/desktop/src/features/home/ui/InboxDetailPane.tsx
@@ -247,7 +247,7 @@ export function InboxDetailPane({
       <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
         <TopChromeInsetHeader flush>
           <div className="px-5 py-2">
-            <div className="flex min-h-10 min-w-0 items-center justify-between gap-3">
+            <div className="flex min-h-9 min-w-0 items-center justify-between gap-3">
               <div
                 className={cn(
                   "flex min-w-0 items-center",
diff --git a/desktop/src/features/home/ui/InboxListPane.tsx b/desktop/src/features/home/ui/InboxListPane.tsx
index d150b2ae23..ea40225156 100644
--- a/desktop/src/features/home/ui/InboxListPane.tsx
+++ b/desktop/src/features/home/ui/InboxListPane.tsx
@@ -16,7 +16,6 @@ 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,
@@ -132,9 +131,6 @@ 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);
@@ -329,13 +325,8 @@ export function InboxListPane({
       )}
     >
       <TopChromeInsetHeader flush>
-        <div
-          className={cn(
-            "px-5 py-2 transition-[padding] duration-200 ease-linear",
-            clearCollapsedTopChromeControls && "pl-[184px]",
-          )}
-        >
-          <div className="flex min-h-10 w-full min-w-0 items-center justify-between gap-3">
+        <div className="px-5 py-2">
+          <div className="flex min-h-9 w-full min-w-0 items-center justify-between gap-3">
             <Popover>
               <PopoverTrigger asChild>
                 <button
diff --git a/desktop/src/features/messages/ui/MessageThreadPanel.tsx b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
index 45edc77ad6..cba0ea97c1 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanel.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
@@ -264,7 +264,7 @@ export function MessageThreadPanelSkeleton({
       className={cn(
         "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain pb-24 [overflow-anchor:none]",
         isSplitLayout && auxiliaryPanelContentPaddingClass,
-        !isSplitLayout && !isFloatingOverlay && "pt-[4.75rem]",
+        !isSplitLayout && !isFloatingOverlay && "pt-[3.25rem]",
       )}
       data-testid="message-thread-loading"
     >
@@ -321,8 +321,8 @@ export function MessageThreadPanelSkeleton({
           className={cn(
             "flex cursor-default select-none items-center",
             isSinglePanelView
-              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[4.75rem] min-h-[4.75rem] shrink-0 gap-2.5 bg-background/80 pb-[0.1875rem] pl-4 pr-2 pt-[2.6875rem] backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:pr-3 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55`
-              : "relative z-50 min-h-14 shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55",
+              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[3.25rem] min-h-[3.25rem] shrink-0 gap-2.5 bg-background/80 px-4 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:pr-3 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55`
+              : "relative z-50 min-h-[3.25rem] shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55",
           )}
           data-tauri-drag-region
         >
@@ -617,7 +617,7 @@ export function MessageThreadPanel({
       className={cn(
         "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain pb-24 [overflow-anchor:none]",
         isSplitLayout && auxiliaryPanelContentPaddingClass,
-        !isSplitLayout && !isFloatingOverlay && "pt-[4.75rem]",
+        !isSplitLayout && !isFloatingOverlay && "pt-[3.25rem]",
       )}
       data-testid="message-thread-body"
       onScroll={onScroll}
@@ -989,8 +989,8 @@ export function MessageThreadPanel({
           className={cn(
             "flex cursor-default select-none items-center",
             isSinglePanelView
-              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[4.75rem] min-h-[4.75rem] shrink-0 gap-2.5 bg-background/80 pb-[0.1875rem] pl-4 pr-2 pt-[2.6875rem] backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:pr-3 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55`
-              : "relative z-50 min-h-14 shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55",
+              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[3.25rem] min-h-[3.25rem] shrink-0 gap-2.5 bg-background/80 px-4 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:pr-3 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55`
+              : "relative z-50 min-h-[3.25rem] shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55",
           )}
           data-tauri-drag-region
         >
diff --git a/desktop/src/features/profile/ui/UserProfilePanel.tsx b/desktop/src/features/profile/ui/UserProfilePanel.tsx
index ad2af7c4ab..48136fe288 100644
--- a/desktop/src/features/profile/ui/UserProfilePanel.tsx
+++ b/desktop/src/features/profile/ui/UserProfilePanel.tsx
@@ -338,7 +338,7 @@ export function UserProfilePanel({
       className={cn(
         "min-h-0 flex-1 overflow-y-auto px-4 pb-6",
         isSplitLayout && auxiliaryPanelContentPaddingClass,
-        !isSplitLayout && !isFloatingOverlay && "pt-[4.75rem]",
+        !isSplitLayout && !isFloatingOverlay && "pt-[3.25rem]",
       )}
     >
       {view === "summary" ? (
@@ -459,7 +459,7 @@ export function UserProfilePanel({
         {!isOverlay ? (
           <div
             aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 top-0 z-40 h-[4.75rem] bg-background/80 backdrop-blur-md after:absolute after:left-0 after:right-0 after:top-10 after:h-px after:bg-border/35 supports-[backdrop-filter]:bg-background/70 peer-hover/profile-resize:after:bg-border/80 peer-focus-visible/profile-resize:after:bg-border/80 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55"
+            className="pointer-events-none absolute inset-x-0 top-0 z-40 h-[3.25rem] bg-background/80 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55"
           />
         ) : null}
 
@@ -467,10 +467,10 @@ export function UserProfilePanel({
           className={cn(
             "flex cursor-default select-none items-center",
             isSinglePanelView
-              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[4.75rem] min-h-[4.75rem] shrink-0 gap-2.5 bg-transparent pb-1 pl-4 pr-2 pt-[2.625rem] sm:pl-6 sm:pr-3`
+              ? `relative ${PANEL_SINGLE_COLUMN_HEADER_LAYER_CLASS} -mb-[3.25rem] min-h-[3.25rem] shrink-0 gap-2.5 bg-transparent px-4 py-2 sm:pl-6 sm:pr-3`
               : isOverlay
-                ? "relative z-50 min-h-14 shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55"
-                : "absolute inset-x-0 top-[2.625rem] z-50 min-h-8 gap-3 bg-transparent px-3 py-1 after:absolute after:bottom-0 after:-left-px after:top-0 after:w-px after:bg-border/45 after:transition-colors peer-hover/profile-resize:after:bg-border/80 peer-focus-visible/profile-resize:after:bg-border/80",
+                ? "relative z-50 min-h-[3.25rem] shrink-0 gap-3 bg-background/80 px-5 py-2 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-[backdrop-filter]:bg-background/55"
+                : "absolute inset-x-0 top-0 z-50 min-h-[3.25rem] gap-3 bg-transparent px-3 py-2 after:absolute after:bottom-0 after:-left-px after:top-0 after:w-px after:bg-border/45 after:transition-colors peer-hover/profile-resize:after:bg-border/80 peer-focus-visible/profile-resize:after:bg-border/80",
           )}
           data-tauri-drag-region
         >
diff --git a/desktop/src/features/projects/ui/ProjectDetailScreen.tsx b/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
index 86439d5a70..6fd9eb2261 100644
--- a/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
+++ b/desktop/src/features/projects/ui/ProjectDetailScreen.tsx
@@ -13,8 +13,6 @@ import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { useProjectQuery } from "@/features/projects/hooks";
 import { useUsersBatchQuery } from "@/features/profile/hooks";
 import { resolveUserLabel } from "@/features/profile/lib/identity";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
-import { cn } from "@/shared/lib/cn";
 import { isSafeUrl } from "@/shared/lib/url";
 import { Button } from "@/shared/ui/button";
 import { UserAvatar } from "@/shared/ui/UserAvatar";
@@ -126,12 +124,7 @@ export function ProjectDetailScreen({ projectId }: ProjectDetailScreenProps) {
 
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-      <div
-        className={cn(
-          "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4",
-          topChromeInset.padding,
-        )}
-      >
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4">
         <div className="mb-4">
           <Button
             className="gap-1.5 text-muted-foreground"
diff --git a/desktop/src/features/projects/ui/ProjectsView.tsx b/desktop/src/features/projects/ui/ProjectsView.tsx
index 8ca16846e7..0b8d030f0f 100644
--- a/desktop/src/features/projects/ui/ProjectsView.tsx
+++ b/desktop/src/features/projects/ui/ProjectsView.tsx
@@ -2,8 +2,6 @@ import { ExternalLink, FolderGit2, GitFork, Users } from "lucide-react";
 
 import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { useProjectsQuery } from "@/features/projects/hooks";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
-import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
 
@@ -50,12 +48,7 @@ export function ProjectsView() {
   }
 
   return (
-    <div
-      className={cn(
-        "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4",
-        topChromeInset.padding,
-      )}
-    >
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4">
       <div className="mb-3 flex items-center gap-2">
         <h2 className="text-sm font-medium text-muted-foreground">
           {projects.length} {projects.length === 1 ? "project" : "projects"}
diff --git a/desktop/src/features/pulse/ui/PulseTabBar.tsx b/desktop/src/features/pulse/ui/PulseTabBar.tsx
index 3ba3b0777a..8c301281ba 100644
--- a/desktop/src/features/pulse/ui/PulseTabBar.tsx
+++ b/desktop/src/features/pulse/ui/PulseTabBar.tsx
@@ -23,7 +23,7 @@ export function PulseTabBar({
   onTabChange,
 }: PulseTabBarProps) {
   return (
-    <div className="relative z-40 shrink-0 px-4 pt-11 sm:px-6">
+    <div className="relative z-40 shrink-0 px-4 pt-4 sm:px-6">
       <div className="relative mx-auto flex w-full max-w-2xl items-center justify-center">
         <div className="min-w-0 max-w-full">
           <div className="-mx-4 overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
diff --git a/desktop/src/features/search/ui/TopbarSearch.tsx b/desktop/src/features/search/ui/TopbarSearch.tsx
index 47719682ee..98320138c2 100644
--- a/desktop/src/features/search/ui/TopbarSearch.tsx
+++ b/desktop/src/features/search/ui/TopbarSearch.tsx
@@ -808,7 +808,7 @@ export function TopbarSearch({
           className={
             isIconVariant
               ? "group/search flex size-6 items-center justify-center rounded p-1 text-sidebar-foreground/50 transition-colors hover:bg-sidebar-border/35 hover:text-sidebar-foreground focus-visible:bg-sidebar-border/35 focus-visible:text-sidebar-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sidebar-ring"
-              : "group/search flex h-7 w-full items-center gap-2 rounded-lg bg-sidebar-border/20 px-2 text-left text-xs text-sidebar-foreground/55 transition-colors duration-150 ease-out hover:bg-sidebar-border/35 hover:text-sidebar-foreground focus-visible:bg-sidebar-border/35 focus-visible:text-sidebar-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-sidebar-ring"
+              : "group/search flex h-8 w-full items-center gap-2 rounded-md bg-sidebar-border/35 px-2 text-left text-sm text-sidebar-foreground/55 transition-colors duration-150 ease-out hover:bg-sidebar-border/35 hover:text-sidebar-foreground focus-visible:bg-sidebar-border/35 focus-visible:text-sidebar-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-sidebar-ring"
           }
           data-testid="open-search"
           onClick={openSearchDialog}
diff --git a/desktop/src/features/settings/ui/SettingsView.tsx b/desktop/src/features/settings/ui/SettingsView.tsx
index 1c958d59d0..aea4edd3cd 100644
--- a/desktop/src/features/settings/ui/SettingsView.tsx
+++ b/desktop/src/features/settings/ui/SettingsView.tsx
@@ -265,17 +265,17 @@ export function SettingsView({
 
       <SidebarInset
         className={cn(
-          "relative min-h-0 min-w-0 overflow-hidden motion-safe:transition-opacity motion-safe:duration-200",
+          "isolate relative min-h-0 min-w-0 overflow-hidden bg-sidebar motion-safe:transition-opacity motion-safe:duration-200",
           isLoaded ? "opacity-100" : "opacity-0",
         )}
         data-testid="settings-view"
       >
         <div
           aria-hidden="true"
-          className="absolute inset-x-0 top-0 h-11"
+          className="absolute inset-x-0 top-0 z-10 h-11"
           data-tauri-drag-region
         />
-        <div className="flex min-h-0 flex-1 flex-col overflow-hidden pt-11">
+        <div className="relative z-10 ml-px mt-px flex min-h-0 flex-1 flex-col overflow-hidden rounded-tl-xl bg-background pt-11 shadow-[-1px_-1px_0_0_hsl(var(--sidebar-border)/0.45)]">
           <section className="min-h-0 flex-1 overflow-y-auto px-5 pb-5 pt-4 sm:px-6">
             <div
               className="mx-auto flex w-full max-w-4xl flex-col gap-4"
diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx
index dc99095715..638eed2ad8 100644
--- a/desktop/src/features/sidebar/ui/AppSidebar.tsx
+++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx
@@ -546,7 +546,7 @@ export function AppSidebar({
           />
         ) : null}
         <div
-          className="mt-(--buzz-top-chrome-height,2.5rem) shrink-0 px-2 pt-2"
+          className="shrink-0 px-2 pt-2.5"
           data-testid="sidebar-pinned-header"
         >
           <TopbarSearch
@@ -562,7 +562,7 @@ export function AppSidebar({
             suggestionChannels={channels}
           />
           <SidebarHeader
-            className="cursor-default select-none px-0 pb-0 pt-2"
+            className="cursor-default select-none px-0 pb-0 pt-2.5"
             data-tauri-drag-region
           >
             <SidebarMenu>
diff --git a/desktop/src/features/workflows/ui/WorkflowDetailPanel.tsx b/desktop/src/features/workflows/ui/WorkflowDetailPanel.tsx
index e727cf9e8c..152bf99203 100644
--- a/desktop/src/features/workflows/ui/WorkflowDetailPanel.tsx
+++ b/desktop/src/features/workflows/ui/WorkflowDetailPanel.tsx
@@ -56,7 +56,7 @@ export function WorkflowDetailPanel({
 
   return (
     <div
-      className="flex h-full flex-col border-l bg-background pt-11"
+      className="flex h-full flex-col border-l bg-background pt-4"
       data-testid="workflow-detail-panel"
     >
       <div className="flex items-center justify-between border-b px-4 py-3">
diff --git a/desktop/src/features/workflows/ui/WorkflowsView.tsx b/desktop/src/features/workflows/ui/WorkflowsView.tsx
index 59de0c288d..a628fd83af 100644
--- a/desktop/src/features/workflows/ui/WorkflowsView.tsx
+++ b/desktop/src/features/workflows/ui/WorkflowsView.tsx
@@ -13,8 +13,6 @@ import {
   getChannelWorkflows,
   triggerWorkflow,
 } from "@/shared/api/tauriWorkflows";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
-import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
 import { Skeleton } from "@/shared/ui/skeleton";
@@ -168,10 +166,7 @@ export function WorkflowsView({
       data-testid="workflows-view"
     >
       <div
-        className={cn(
-          "flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-4",
-          topChromeInset.padding,
-        )}
+        className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4"
         data-scroll-restoration-id="workflows-list"
       >
         <div className="mb-4 flex items-center justify-between">
diff --git a/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx b/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
index c05da55402..406354b9ed 100644
--- a/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
+++ b/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
@@ -16,17 +16,17 @@ export function AuxiliaryPanelHeader({
   return (
     <div
       className={cn(
-        "pointer-events-none relative z-30 bg-background/80 backdrop-blur-md after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border/35 after:content-[''] supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
+        "pointer-events-none relative z-30 bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
         channelChrome.negativeMargin,
         className,
       )}
       {...props}
     >
       <div
-        className="pointer-events-auto relative z-30 flex min-h-14 shrink-0 cursor-default select-none items-center gap-2.5 px-5 py-2"
+        className="pointer-events-auto relative z-30 shrink-0 cursor-default select-none px-5 py-2"
         data-tauri-drag-region
       >
-        {children}
+        <div className="flex h-9 min-w-0 items-center gap-2.5">{children}</div>
       </div>
     </div>
   );
diff --git a/desktop/src/shared/layout/TopChromeInsetHeader.tsx b/desktop/src/shared/layout/TopChromeInsetHeader.tsx
index 1be4222395..792ccb2510 100644
--- a/desktop/src/shared/layout/TopChromeInsetHeader.tsx
+++ b/desktop/src/shared/layout/TopChromeInsetHeader.tsx
@@ -4,14 +4,13 @@ import { topChromeInset } from "@/shared/layout/chromeLayout";
 import { cn } from "@/shared/lib/cn";
 
 type TopChromeInsetHeaderProps = React.ComponentProps<"div"> & {
-  /** Drop the top-chrome inset so the header sits flush at y=0. */
+  /** Keep the header flush with its parent content row. */
   flush?: boolean;
 };
 
 /**
- * Flowed header row that clears the global search/drag chrome and draws the
- * horizontal separator at the bottom edge of that inset. Pass `flush` to drop
- * the inset and sit the header at the top (e.g. channel/thread panes).
+ * Flowed header row with the standard chrome backdrop and separators. The
+ * global top chrome now sits above this content in normal layout flow.
  */
 export function TopChromeInsetHeader({
   className,
diff --git a/desktop/src/shared/layout/chromeLayout.ts b/desktop/src/shared/layout/chromeLayout.ts
index 7c90b892e6..82ebdbb4e1 100644
--- a/desktop/src/shared/layout/chromeLayout.ts
+++ b/desktop/src/shared/layout/chromeLayout.ts
@@ -16,23 +16,23 @@ export const channelContentTopPaddingMeasurement = {
   resetValue: chromeCssVarDefaults[chromeCssVars.channelContentTopPadding],
 } as const;
 
-/** Tailwind class fragments for layout under the global top chrome. */
+/** Tailwind class fragments for content below the in-flow global top chrome. */
 export const topChromeInset = {
-  /** Absolute/fixed top offset below the search bar. */
-  top: "top-(--buzz-top-chrome-height,2.5rem)",
-  /** Padding-top clearing the global top chrome. */
-  padding: "pt-(--buzz-top-chrome-height,2.5rem)",
+  /** Absolute/fixed top offset inside the content row. */
+  top: "top-0",
+  /** Content now sits below the global chrome in normal layout flow. */
+  padding: "pt-0",
   /** `after:` pseudo-element top offset. */
-  afterTop: "after:top-(--buzz-top-chrome-height,2.5rem)",
-  /** Horizontal divider at the bottom edge of the global top chrome inset. */
+  afterTop: "after:top-0",
+  /** Horizontal divider at the top edge of the content row. */
   divider:
-    "before:pointer-events-none before:absolute before:inset-x-0 before:top-(--buzz-top-chrome-height,2.5rem) before:h-px before:bg-border/35 before:content-['']",
+    "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 border-b border-border/35 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",
-  /** Vertical pane divider starting below the global top chrome. */
+    "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",
+  /** 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-(--buzz-top-chrome-height,2.5rem) after:z-40 after:w-px after:bg-border/35 after:content-['']",
+    "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-['']",
 } as const;
 
 /** Tailwind class fragments for the global top chrome backdrop strip. */
diff --git a/desktop/src/shared/ui/ViewLoadingFallback.tsx b/desktop/src/shared/ui/ViewLoadingFallback.tsx
index a729bfec7b..5fe4359497 100644
--- a/desktop/src/shared/ui/ViewLoadingFallback.tsx
+++ b/desktop/src/shared/ui/ViewLoadingFallback.tsx
@@ -1,9 +1,8 @@
 import { Card } from "@/shared/ui/card";
 import { Skeleton } from "@/shared/ui/skeleton";
 import { cn } from "@/shared/lib/cn";
-import { channelChrome, topChromeInset } from "@/shared/layout/chromeLayout";
+import { channelChrome } from "@/shared/layout/chromeLayout";
 import { TopChromeInsetHeader } from "@/shared/layout/TopChromeInsetHeader";
-import { TopChromeBackdrop } from "@/shared/ui/TopChromeBackdrop";
 
 type ViewLoadingFallbackKind =
   | "agents"
@@ -21,16 +20,18 @@ type ViewLoadingFallbackProps = {
 function LoadingHeaderSkeleton() {
   return (
     <TopChromeInsetHeader data-tauri-drag-region flush>
-      <header className="flex min-h-14 min-w-0 cursor-default select-none items-center gap-2.5 px-5 py-2">
-        <div className="min-w-0 flex-1">
-          <div className="flex min-w-0 items-center gap-1 overflow-hidden">
-            <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
-            <Skeleton className="h-4 w-28 max-w-[50vw]" />
+      <header className="min-w-0 cursor-default select-none px-5 py-2">
+        <div className="flex h-9 min-w-0 items-center gap-2.5">
+          <div className="min-w-0 flex-1">
+            <div className="flex min-w-0 items-center gap-1 overflow-hidden">
+              <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
+              <Skeleton className="h-4 w-28 max-w-[50vw]" />
+            </div>
+          </div>
+          <div className="hidden shrink-0 items-center gap-1 sm:flex">
+            <Skeleton className="h-8 w-16 rounded-lg" />
+            <Skeleton className="h-8 w-8 rounded-lg" />
           </div>
-        </div>
-        <div className="hidden shrink-0 items-center gap-1 sm:flex">
-          <Skeleton className="h-8 w-16 rounded-lg" />
-          <Skeleton className="h-8 w-8 rounded-lg" />
         </div>
       </header>
     </TopChromeInsetHeader>
@@ -260,12 +261,7 @@ function AgentTeamsSkeleton() {
 
 function AgentsLoadingBody() {
   return (
-    <div
-      className={cn(
-        "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 sm:px-6",
-        topChromeInset.padding,
-      )}
-    >
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-4 sm:px-6">
       <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
         <div className="flex flex-col gap-6">
           <AgentsLibrarySkeleton />
@@ -278,12 +274,7 @@ function AgentsLoadingBody() {
 
 function CardListLoadingBody() {
   return (
-    <div
-      className={cn(
-        "flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 sm:px-6",
-        topChromeInset.padding,
-      )}
-    >
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4 sm:px-6">
       <div className="mb-4 flex items-center justify-between gap-3">
         <div className="flex items-center gap-2">
           <Skeleton className="h-6 w-28" />
@@ -408,11 +399,7 @@ export function ViewLoadingFallback({
 
   return (
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-      {shouldShowChannelHeader ? (
-        <LoadingHeaderSkeleton />
-      ) : includeHeader ? (
-        <TopChromeBackdrop />
-      ) : null}
+      {shouldShowChannelHeader ? <LoadingHeaderSkeleton /> : null}
       {kind === "agents" ? <AgentsLoadingBody /> : null}
       {kind === "workflows" ? <CardListLoadingBody /> : null}
       {kind === "projects" ? <CardListLoadingBody /> : null}
diff --git a/desktop/src/shared/ui/sidebar.tsx b/desktop/src/shared/ui/sidebar.tsx
index d7eb6603d5..b6a47bc4ee 100644
--- a/desktop/src/shared/ui/sidebar.tsx
+++ b/desktop/src/shared/ui/sidebar.tsx
@@ -581,7 +581,7 @@ const SidebarRail = React.forwardRef<
         className={cn(
           "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
           "cursor-col-resize",
-          "after:absolute after:inset-y-0 after:left-1/2 after:z-10 after:w-px after:-translate-x-1/2 after:bg-border/50 after:transition-colors after:content-[''] hover:after:bg-sidebar-border focus-visible:after:bg-sidebar-border group-data-[resizing=true]:after:bg-sidebar-border",
+          "after:absolute after:bottom-0 after:left-1/2 after:top-6 after:z-10 after:w-px after:-translate-x-1/2 after:bg-transparent after:content-['']",
           "[[data-state=collapsed]_&]:cursor-pointer",
           "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:hover:bg-sidebar",
           "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
diff --git a/desktop/tests/e2e/sidebar-more-unread-overlap.spec.ts b/desktop/tests/e2e/sidebar-more-unread-overlap.spec.ts
index adab02a752..48ba088e99 100644
--- a/desktop/tests/e2e/sidebar-more-unread-overlap.spec.ts
+++ b/desktop/tests/e2e/sidebar-more-unread-overlap.spec.ts
@@ -2,27 +2,26 @@
  * Visual regression for the sidebar `MoreUnreadButton` (top variant)
  * overlapping the macOS traffic-light region in the global top chrome.
  *
- * The bug: `position="top"` anchored the pill at `top-0` inside a column
- * starting at window y=0, so it sat inside the 40px chrome strip — where
- * the macOS traffic lights live on the native window.
+ * The old bug: `position="top"` anchored the pill at `top-0` inside a column
+ * starting at window y=0, so it sat inside the 40px chrome strip where the
+ * macOS traffic lights live on the native window.
  *
- * The fix: anchor the top pill to `topChromeInset.top`
- * (`top-(--buzz-top-chrome-height,2.5rem)`) so it lines up with
- * `SidebarContent`'s existing top margin.
+ * The current layout keeps the global top chrome in normal flow above the
+ * sidebar row, so `top-0` inside the sidebar starts below the traffic-light
+ * strip.
  *
- * This spec injects two synthetic pill elements into the live sidebar's
- * relative container — one with the legacy `top-0` className and one with
- * the fixed `top-(--buzz-top-chrome-height,2.5rem)` className — and
- * screenshots each next to the chrome strip so the difference is visible.
+ * This spec injects a synthetic pill into the live sidebar's relative
+ * container and screenshots it next to the chrome strip so the positioning is
+ * visible.
  */
 import { expect, test } from "@playwright/test";
 
+import { waitForAnimations } from "../helpers/animations";
 import { installMockBridge } from "../helpers/bridge";
 
 const SHOTS = "test-results/sidebar-more-unread-overlap";
 
-const LEGACY_TOP_CLASS = "top-0";
-const FIXED_TOP_CLASS = "top-(--buzz-top-chrome-height,2.5rem)";
+const TOP_CLASS = "top-0";
 
 const PILL_BASE =
   "pointer-events-none absolute inset-x-0 z-10 flex justify-center py-1";
@@ -72,38 +71,20 @@ test.describe("sidebar MoreUnreadButton top chrome overlap", () => {
     await expect(page.getByTestId("app-sidebar")).toBeVisible();
   });
 
-  test("before fix: top-0 overlaps traffic-light strip", async ({ page }) => {
-    await injectSyntheticPill(page, LEGACY_TOP_CLASS, "synthetic-before");
-    const pill = page.getByTestId("synthetic-before");
+  test("top pill clears the in-flow traffic-light strip", async ({ page }) => {
+    await injectSyntheticPill(page, TOP_CLASS, "synthetic-top");
+    const pill = page.getByTestId("synthetic-top");
     await expect(pill).toBeVisible();
 
     const box = await pill.boundingBox();
     expect(box).not.toBeNull();
-    // Pre-fix: pill is anchored at y=0, inside the 40px chrome strip.
-    expect(box?.y ?? Number.NaN).toBeLessThan(20);
-
-    // Screenshot the top-left corner of the sidebar with the chrome strip
-    // visible above it.
-    await page.screenshot({
-      path: `${SHOTS}/before-top-0-overlap.png`,
-      clip: { x: 0, y: 0, width: 320, height: 120 },
-    });
-  });
-
-  test("after fix: top-(--buzz-top-chrome-height) clears chrome strip", async ({
-    page,
-  }) => {
-    await injectSyntheticPill(page, FIXED_TOP_CLASS, "synthetic-after");
-    const pill = page.getByTestId("synthetic-after");
-    await expect(pill).toBeVisible();
-
-    const box = await pill.boundingBox();
-    expect(box).not.toBeNull();
-    // Post-fix: pill sits below the 40px chrome strip.
+    // The pill is anchored at the top of the sidebar row, below the 40px
+    // in-flow chrome strip.
     expect(box?.y ?? Number.NaN).toBeGreaterThanOrEqual(40);
 
+    await waitForAnimations(page);
     await page.screenshot({
-      path: `${SHOTS}/after-top-chrome-inset.png`,
+      path: `${SHOTS}/top-pill-below-in-flow-chrome.png`,
       clip: { x: 0, y: 0, width: 320, height: 120 },
     });
   });