From 603d62bc317e8c19a149f8eac2e0af3f1190df64 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Mon, 8 Sep 2025 17:56:53 +0800
Subject: [PATCH] fix: align entry header and chat header with sidebar

---
 .../ai-chat/components/layouts/ChatHeader.tsx | 49 +++++++++----------
 .../components/entry-header/AIEntryHeader.tsx |  2 +-
 .../internal/EntryHeaderBreadcrumb.tsx        |  2 +-
 apps/desktop/tailwind.config.ts               |  3 ++
 4 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatHeader.tsx b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatHeader.tsx
index cc7643ecb..e5bc2a3da 100644
--- a/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatHeader.tsx
+++ b/apps/desktop/layer/renderer/src/modules/ai-chat/components/layouts/ChatHeader.tsx
@@ -1,5 +1,5 @@
 import { ActionButton } from "@follow/components/ui/button/index.js"
-import clsx from "clsx"
+import { cn } from "@follow/utils"
 import type { ReactNode } from "react"
 import { useCallback } from "react"
 
@@ -44,33 +44,30 @@ const ChatHeaderLayout = ({
   const isFloating = useAIChatPanelStyle() === AIChatPanelStyle.Floating
 
   return (
-    <div
-      className={clsx(
-        "absolute inset-x-0 top-0 z-[1] h-12",
-        !isFloating && "bg-background border-b",
-      )}
-    >
-      {isFloating && (
-        <div
-          className="bg-background/70 backdrop-blur-background absolute inset-0"
-          style={{
-            maskImage: `linear-gradient(to bottom, black 0%, black 90%, transparent 100%)`,
-          }}
-        />
-      )}
+    <div className={cn("absolute inset-x-0 top-0 z-[1]", !isFloating && "bg-background border-b")}>
+      <div className="h-entry-header">
+        {isFloating && (
+          <div
+            className="bg-background/70 backdrop-blur-background absolute inset-0"
+            style={{
+              maskImage: `linear-gradient(to bottom, black 0%, black 90%, transparent 100%)`,
+            }}
+          />
+        )}
 
-      <div className="relative z-10 flex h-full items-center justify-between px-4">
-        <div className="mr-2 flex min-w-0 flex-1 items-center">
-          <EditableTitle title={currentTitle} onSave={handleTitleSave} placeholder="New Chat" />
-        </div>
+        <div className="relative z-10 flex h-full items-center justify-between px-4">
+          <div className="mr-2 flex min-w-0 flex-1 items-center">
+            <EditableTitle title={currentTitle} onSave={handleTitleSave} placeholder="New Chat" />
+          </div>
 
-        {/* Right side - Actions */}
-        <div className="flex items-center gap-2">
-          {renderActions({
-            onNewChatClick: handleNewChatClick,
-            currentTitle,
-            onSaveTitle: handleTitleSave,
-          })}
+          {/* Right side - Actions */}
+          <div className="flex items-center gap-2">
+            {renderActions({
+              onNewChatClick: handleNewChatClick,
+              currentTitle,
+              onSaveTitle: handleTitleSave,
+            })}
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/AIEntryHeader.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/AIEntryHeader.tsx
index a40b000ee..8ef302a48 100644
--- a/apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/AIEntryHeader.tsx
+++ b/apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/AIEntryHeader.tsx
@@ -11,7 +11,7 @@ function EntryHeaderImpl({ entryId, className, compact }: EntryHeaderProps) {
   return (
     <EntryHeaderRoot entryId={entryId} className={className} compact={compact}>
       <div
-        className="bg-background relative z-10 flex h-12 w-full items-center justify-between gap-3 px-4"
+        className="bg-background h-entry-header relative z-10 flex w-full items-center justify-between gap-3 px-4"
         data-at-top={isAtTop}
         data-hide-in-print
       >
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/internal/EntryHeaderBreadcrumb.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/internal/EntryHeaderBreadcrumb.tsx
index 48d90bdac..88e7c1634 100644
--- a/apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/internal/EntryHeaderBreadcrumb.tsx
+++ b/apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/internal/EntryHeaderBreadcrumb.tsx
@@ -233,7 +233,7 @@ export function EntryHeaderBreadcrumb() {
       <nav
         aria-label="Breadcrumb"
         className={
-          "text-text-secondary group/breadcrumb -mb-1 flex min-w-0 items-center gap-1 truncate leading-tight"
+          "text-text-secondary group/breadcrumb flex min-w-0 items-center gap-1 truncate leading-tight"
         }
       >
         <div className="flex min-w-0 items-center gap-1">
diff --git a/apps/desktop/tailwind.config.ts b/apps/desktop/tailwind.config.ts
index d17d201a5..5bc9327f6 100644
--- a/apps/desktop/tailwind.config.ts
+++ b/apps/desktop/tailwind.config.ts
@@ -46,6 +46,9 @@ export default extendConfig({
 
       height: {
         screen: "100svh",
+        // button height 2rem (size-8) + sidebar padding top 0.625rem (pt-2.5) x 2
+        // 2 + 0.625 * 2 = 3.25
+        "entry-header": "3.25rem",
       },
       colors: {
         sidebar: "hsl(var(--fo-sidebar) / <alpha-value>)",