From 6b5cf325c2777f64696923cf5b1c1ffd4fdf82e2 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Tue, 23 Jun 2026 22:40:38 +0100
Subject: [PATCH] Update navigation header height (#1212)

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co>
---
 .../channels/ui/AgentSessionThreadPanel.tsx         |  2 +-
 .../features/channels/ui/ChannelScreenHeader.tsx    |  1 -
 desktop/src/features/chat/ui/ChatHeader.tsx         | 11 ++---------
 desktop/src/features/home/ui/HomeLoadingState.tsx   |  8 ++++----
 desktop/src/features/home/ui/InboxDetailPane.tsx    |  4 ++--
 desktop/src/features/home/ui/InboxListPane.tsx      | 13 ++++++++-----
 .../src/features/messages/ui/MessageThreadPanel.tsx |  4 ++--
 .../src/features/profile/ui/UserProfilePanel.tsx    |  2 +-
 desktop/src/shared/layout/AuxiliaryPanelHeader.tsx  |  2 +-
 desktop/src/shared/ui/ViewLoadingFallback.tsx       |  2 +-
 desktop/tests/e2e/messaging.spec.ts                 | 10 +++++++---
 11 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
index 5b72e5b92c..e858535a39 100644
--- a/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
+++ b/desktop/src/features/channels/ui/AgentSessionThreadPanel.tsx
@@ -202,7 +202,7 @@ export function AgentSessionThreadPanel({
             "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-11 shrink-0 gap-3 bg-background/80 px-3 py-1.5 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 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",
           )}
           data-tauri-drag-region
         >
diff --git a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
index cda079449d..311d22449e 100644
--- a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
@@ -92,7 +92,6 @@ export function ChannelScreenHeader({
     <ChatHeader
       belowSystemChrome
       chromeWrapperRef={chromeWrapperRef}
-      density="compact"
       actions={actions}
       channelType={activeChannel?.channelType}
       description={getChannelDescription(activeChannel)}
diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index 8981361d6d..5cbc8ec204 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -25,7 +25,6 @@ type ChatHeaderProps = {
   belowSystemChrome?: boolean;
   /** Ref to the outer chrome wrapper when `belowSystemChrome` is true. */
   chromeWrapperRef?: React.Ref<HTMLDivElement>;
-  density?: "default" | "compact";
   title: string;
   description?: string;
   channelType?: ChannelType;
@@ -87,7 +86,6 @@ export function ChatHeader({
   actions,
   belowSystemChrome = false,
   chromeWrapperRef,
-  density = "default",
   title,
   description,
   channelType,
@@ -117,13 +115,8 @@ export function ChatHeader({
   const header = (
     <header
       className={cn(
-        "pointer-events-auto relative z-30 flex min-w-0 shrink-0 cursor-default select-none items-center gap-2.5 bg-transparent px-5 transition-[margin,padding] duration-200 ease-linear",
-        density === "compact"
-          ? belowSystemChrome
-            ? "min-h-8 py-1.5"
-            : "min-h-8 py-0"
-          : "min-h-11 py-1.5",
-        overlaysContent && !belowSystemChrome && "-mb-11",
+        "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",
+        overlaysContent && !belowSystemChrome && "-mb-14",
         clearCollapsedTopChromeControls && "pl-[176px]",
       )}
       data-testid="chat-header"
diff --git a/desktop/src/features/home/ui/HomeLoadingState.tsx b/desktop/src/features/home/ui/HomeLoadingState.tsx
index 696219c97b..8fee6b800f 100644
--- a/desktop/src/features/home/ui/HomeLoadingState.tsx
+++ b/desktop/src/features/home/ui/HomeLoadingState.tsx
@@ -5,8 +5,8 @@ export function HomeLoadingState() {
     <div className="min-h-0 flex-1 overflow-hidden">
       <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-1">
-            <div className="flex min-w-0 items-center justify-between gap-3">
+          <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-w-0 items-center gap-[6px]">
                 <Skeleton className="h-4 w-4 shrink-0 rounded-md" />
                 <Skeleton className="h-4 w-14" />
@@ -51,8 +51,8 @@ export function HomeLoadingState() {
         </div>
 
         <div className="relative flex min-h-0 flex-col overflow-hidden bg-background/60">
-          <div className="px-5 py-1 pr-3">
-            <div className="flex min-w-0 items-center justify-between gap-3">
+          <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-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/InboxDetailPane.tsx b/desktop/src/features/home/ui/InboxDetailPane.tsx
index dd45d879f4..0b74041cae 100644
--- a/desktop/src/features/home/ui/InboxDetailPane.tsx
+++ b/desktop/src/features/home/ui/InboxDetailPane.tsx
@@ -246,8 +246,8 @@ export function InboxDetailPane({
     >
       <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
         <TopChromeInsetHeader flush>
-          <div className="px-5 py-1 pr-3">
-            <div className="flex min-w-0 items-center justify-between gap-3">
+          <div className="px-5 py-2">
+            <div className="flex min-h-10 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 5f2fe39936..d150b2ae23 100644
--- a/desktop/src/features/home/ui/InboxListPane.tsx
+++ b/desktop/src/features/home/ui/InboxListPane.tsx
@@ -331,16 +331,16 @@ export function InboxListPane({
       <TopChromeInsetHeader flush>
         <div
           className={cn(
-            "px-3 py-1 transition-[padding] duration-200 ease-linear",
-            clearCollapsedTopChromeControls && "pl-[168px]",
+            "px-5 py-2 transition-[padding] duration-200 ease-linear",
+            clearCollapsedTopChromeControls && "pl-[184px]",
           )}
         >
-          <div className="flex w-full min-w-0 items-center justify-between gap-3">
+          <div className="flex min-h-10 w-full min-w-0 items-center justify-between gap-3">
             <Popover>
               <PopoverTrigger asChild>
                 <button
                   aria-label="Inbox options"
-                  className={INBOX_HEADER_ICON_BUTTON_CLASS}
+                  className={cn(INBOX_HEADER_ICON_BUTTON_CLASS, "-ml-4")}
                   data-testid="inbox-options-trigger"
                   type="button"
                 >
@@ -390,7 +390,10 @@ export function InboxListPane({
                 <DropdownMenuTrigger asChild>
                   <button
                     aria-label={`Filter inbox: ${activeFilter?.label ?? "All"}`}
-                    className={cn(INBOX_HEADER_ICON_BUTTON_CLASS, "relative")}
+                    className={cn(
+                      INBOX_HEADER_ICON_BUTTON_CLASS,
+                      "relative -mr-4",
+                    )}
                     data-testid="inbox-filter-trigger"
                     type="button"
                   >
diff --git a/desktop/src/features/messages/ui/MessageThreadPanel.tsx b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
index ba43b075df..45edc77ad6 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanel.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
@@ -322,7 +322,7 @@ export function MessageThreadPanelSkeleton({
             "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-11 shrink-0 gap-3 bg-background/80 px-3 py-1.5 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 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",
           )}
           data-tauri-drag-region
         >
@@ -990,7 +990,7 @@ export function MessageThreadPanel({
             "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-11 shrink-0 gap-3 bg-background/80 px-3 py-1.5 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 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",
           )}
           data-tauri-drag-region
         >
diff --git a/desktop/src/features/profile/ui/UserProfilePanel.tsx b/desktop/src/features/profile/ui/UserProfilePanel.tsx
index e84dba7ad7..ad2af7c4ab 100644
--- a/desktop/src/features/profile/ui/UserProfilePanel.tsx
+++ b/desktop/src/features/profile/ui/UserProfilePanel.tsx
@@ -469,7 +469,7 @@ export function UserProfilePanel({
             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`
               : isOverlay
-                ? "relative z-50 min-h-11 shrink-0 gap-3 bg-background/80 px-3 py-1.5 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 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",
           )}
           data-tauri-drag-region
diff --git a/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx b/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
index a7e94fded5..c05da55402 100644
--- a/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
+++ b/desktop/src/shared/layout/AuxiliaryPanelHeader.tsx
@@ -23,7 +23,7 @@ export function AuxiliaryPanelHeader({
       {...props}
     >
       <div
-        className="pointer-events-auto relative z-30 flex min-h-8 shrink-0 cursor-default select-none items-center gap-2.5 px-4 py-1.5 sm:pr-3"
+        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"
         data-tauri-drag-region
       >
         {children}
diff --git a/desktop/src/shared/ui/ViewLoadingFallback.tsx b/desktop/src/shared/ui/ViewLoadingFallback.tsx
index 09cef49048..a729bfec7b 100644
--- a/desktop/src/shared/ui/ViewLoadingFallback.tsx
+++ b/desktop/src/shared/ui/ViewLoadingFallback.tsx
@@ -21,7 +21,7 @@ type ViewLoadingFallbackProps = {
 function LoadingHeaderSkeleton() {
   return (
     <TopChromeInsetHeader data-tauri-drag-region flush>
-      <header className="flex min-h-8 min-w-0 cursor-default select-none items-center gap-2.5 px-5 py-1.5">
+      <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" />
diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts
index 9b6ce7c5c5..1c38e51f0b 100644
--- a/desktop/tests/e2e/messaging.spec.ts
+++ b/desktop/tests/e2e/messaging.spec.ts
@@ -802,9 +802,13 @@ test("narrow thread view collapses channel header actions into a menu", async ({
   if (!menuBox || !threadPanelBox) {
     throw new Error("Expected header action menu and thread panel bounds");
   }
-  const menuGapPx = threadPanelBox.x - (menuBox.x + menuBox.width);
-  expect(menuGapPx).toBeGreaterThanOrEqual(18);
-  expect(menuGapPx).toBeLessThanOrEqual(22);
+  const menuGap = threadPanelBox.x - (menuBox.x + menuBox.width);
+  const headerPaddingInlineEnd = await page
+    .getByTestId("chat-header")
+    .evaluate((header) =>
+      Number.parseFloat(window.getComputedStyle(header).paddingRight),
+    );
+  expect(Math.round(menuGap)).toBe(Math.round(headerPaddingInlineEnd));
 
   await menuTrigger.click();