fix: align entry header and chat header with sidebar

This commit is contained in:
Stephen Zhou 2025-09-08 17:56:53 +08:00
parent 2429dde83f
commit 603d62bc31
No known key found for this signature in database
4 changed files with 28 additions and 28 deletions

View File

@ -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>

View File

@ -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
>

View File

@ -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">

View File

@ -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>)",