fix: align chat and activity panel header borders

Reduce chat header padding and tighten the title/subtitle line height so the border-bottom lines up with the activity side panel header.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-22 18:51:43 +01:00
co-authored by Copilot
parent d6022fcb79
commit 585f2740a5
2 changed files with 23 additions and 21 deletions
+1 -1
View File
@@ -46,7 +46,7 @@ export function ActivityPanel({ activity, pattern, session }: ActivityPanelProps
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
{/* Header — top padding clears the title bar overlay zone */} {/* Header — top padding clears the title bar overlay zone */}
<div className="border-b border-[var(--color-border)] px-4 pb-3 pt-12"> <div className="border-b border-[var(--color-border)] px-4 pb-3 pt-12">
<div className="flex items-center gap-2"> <div className="flex min-h-8 items-center gap-2">
<Activity className="size-4 text-zinc-500" /> <Activity className="size-4 text-zinc-500" />
<span className="text-[12px] font-semibold uppercase tracking-[0.12em] text-zinc-400"> <span className="text-[12px] font-semibold uppercase tracking-[0.12em] text-zinc-400">
Activity Activity
+22 -20
View File
@@ -313,26 +313,28 @@ export function ChatPane({
return ( return (
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
{/* Header — extra top padding clears the title bar overlay zone */} {/* Header — extra top padding clears the title bar overlay zone */}
<header className="flex items-center justify-between border-b border-[var(--color-border)] px-6 pb-3 pt-12"> <header className="border-b border-[var(--color-border)] px-6 pb-3 pt-12">
<div className="min-w-0"> <div className="flex min-h-8 items-center justify-between">
<h2 className="truncate text-sm font-semibold text-zinc-100">{session.title}</h2> <div className="min-w-0">
<p className="mt-0.5 truncate text-[12px] text-zinc-500"> <h2 className="truncate text-[13px] font-semibold leading-tight text-zinc-100">{session.title}</h2>
{isScratchpad ? `Scratchpad · ${pattern.name}` : `${project.name} · ${pattern.name} · ${pattern.mode}`} <p className="truncate text-[11px] leading-tight text-zinc-500">
</p> {isScratchpad ? `Scratchpad · ${pattern.name}` : `${project.name} · ${pattern.name} · ${pattern.mode}`}
</div> </p>
<div className="flex items-center gap-2"> </div>
{isSessionBusy && <span className="size-2 animate-pulse rounded-full bg-blue-400" />} <div className="flex items-center gap-2">
{session.status === 'error' && ( {isSessionBusy && <span className="size-2 animate-pulse rounded-full bg-blue-400" />}
<div className="flex items-center gap-1.5 text-[12px] text-red-400"> {session.status === 'error' && (
<AlertCircle className="size-3.5" /> <div className="flex items-center gap-1.5 text-[12px] text-red-400">
Error <AlertCircle className="size-3.5" />
</div> Error
)} </div>
{session.status === 'idle' && session.messages.length > 0 && ( )}
<span className="text-[12px] text-zinc-600"> {session.status === 'idle' && session.messages.length > 0 && (
{session.messages.length} message{session.messages.length === 1 ? '' : 's'} <span className="text-[12px] text-zinc-600">
</span> {session.messages.length} message{session.messages.length === 1 ? '' : 's'}
)} </span>
)}
</div>
</div> </div>
</header> </header>