fix: align entry header and chat header with sidebar
This commit is contained in:
parent
2429dde83f
commit
603d62bc31
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>)",
|
||||
|
|
|
|||
Loading…
Reference in New Issue