From 5c77864b14317fd983b9c4be754d4a5938775ea8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 4 May 2026 03:06:01 +0530
Subject: [PATCH] refactor(ui): standardize header styles across panels; adjust
 button sizes and spacing for improved layout consistency

---
 .../components/assistant-ui/chat-viewport.tsx |  3 +--
 .../citation-panel/citation-panel.tsx         | 17 +++++++++++------
 .../components/editor-panel/editor-panel.tsx  | 19 ++++++++++++-------
 .../components/report-panel/report-panel.tsx  | 19 ++++++++++++-------
 surfsense_web/components/ui/fixed-toolbar.tsx |  2 +-
 5 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/chat-viewport.tsx b/surfsense_web/components/assistant-ui/chat-viewport.tsx
index c0684407e..a7cf227b4 100644
--- a/surfsense_web/components/assistant-ui/chat-viewport.tsx
+++ b/surfsense_web/components/assistant-ui/chat-viewport.tsx
@@ -9,8 +9,7 @@ const ChatScrollToBottom: FC = () => (
 	<ThreadPrimitive.ScrollToBottom asChild>
 		<TooltipIconButton
 			tooltip="Scroll to bottom"
-			variant="outline"
-			className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-main-panel dark:hover:bg-accent"
+			className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full border-0 bg-muted p-4 text-foreground hover:bg-muted/80 disabled:invisible"
 		>
 			<ArrowDownIcon />
 		</TooltipIconButton>
diff --git a/surfsense_web/components/citation-panel/citation-panel.tsx b/surfsense_web/components/citation-panel/citation-panel.tsx
index ed8acd656..e9f14bf64 100644
--- a/surfsense_web/components/citation-panel/citation-panel.tsx
+++ b/surfsense_web/components/citation-panel/citation-panel.tsx
@@ -94,19 +94,24 @@ export const CitationPanelContent: FC<CitationPanelContentProps> = ({ chunkId, o
 
 	return (
 		<>
-			<div className="shrink-0 border-b">
-				<div className="flex h-14 items-center justify-between px-4">
-					<h2 className="text-lg font-medium text-muted-foreground select-none">Citation</h2>
+			<div className="shrink-0">
+				<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
+					<h2 className="select-none text-lg font-semibold">Citation</h2>
 					<div className="flex items-center gap-1 shrink-0">
 						{onClose && (
-							<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
-								<XIcon className="size-4" />
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={onClose}
+								className="h-8 w-8 rounded-full shrink-0"
+							>
+								<XIcon className="h-4 w-4 text-muted-foreground" />
 								<span className="sr-only">Close citation panel</span>
 							</Button>
 						)}
 					</div>
 				</div>
-				<div className="flex h-10 items-center justify-between gap-2 border-t px-4">
+				<div className="flex h-10 items-center justify-between gap-2 border-b px-4">
 					<div className="min-w-0 flex flex-1 items-center gap-2">
 						<p className="truncate text-sm text-muted-foreground">
 							{data?.title ?? (isLoading ? "Loading…" : `Chunk #${chunkId}`)}
diff --git a/surfsense_web/components/editor-panel/editor-panel.tsx b/surfsense_web/components/editor-panel/editor-panel.tsx
index eab07a91b..224f0b6a4 100644
--- a/surfsense_web/components/editor-panel/editor-panel.tsx
+++ b/surfsense_web/components/editor-panel/editor-panel.tsx
@@ -448,17 +448,22 @@ export function EditorPanelContent({
 	return (
 		<>
 			{showDesktopHeader ? (
-				<div className="shrink-0 border-b">
-					<div className="flex h-14 items-center justify-between px-4">
-						<h2 className="text-lg font-medium text-muted-foreground select-none">File</h2>
+				<div className="shrink-0">
+					<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
+						<h2 className="select-none text-lg font-semibold">File</h2>
 						<div className="flex items-center gap-1 shrink-0">
-							<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
-								<XIcon className="size-4" />
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={onClose}
+								className="h-8 w-8 rounded-full shrink-0"
+							>
+								<XIcon className="h-4 w-4 text-muted-foreground" />
 								<span className="sr-only">Close editor panel</span>
 							</Button>
 						</div>
 					</div>
-					<div className="flex h-10 items-center justify-between gap-2 border-t px-4">
+					<div className="flex h-10 items-center justify-between gap-2 border-b px-4">
 						<div className="min-w-0 flex flex-1 items-center gap-2">
 							<p className="truncate text-sm text-muted-foreground">{displayTitle}</p>
 						</div>
@@ -667,7 +672,7 @@ export function EditorPanelContent({
 								placeholder="Start writing..."
 								editorVariant="default"
 								allowModeToggle={false}
-								reserveToolbarSpace
+								reserveToolbarSpace={isEditing}
 								defaultEditing={isEditing}
 								className="**:[[role=toolbar]]:bg-sidebar!"
 								// Render `[citation:N]` badges in view mode only.
diff --git a/surfsense_web/components/report-panel/report-panel.tsx b/surfsense_web/components/report-panel/report-panel.tsx
index 7fafc9c3b..53625b521 100644
--- a/surfsense_web/components/report-panel/report-panel.tsx
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@@ -446,21 +446,26 @@ export function ReportPanelContent({
 		<>
 			{showDesktopHeader ? (
 				<>
-					{/* Header — matches the editor panel "File" header pattern */}
-					<div className="flex h-14 items-center justify-between px-4 shrink-0">
-						<h2 className="text-lg font-medium text-muted-foreground select-none">
+					{/* Header — matches the Documents panel header pattern */}
+					<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
+						<h2 className="select-none text-lg font-semibold">
 							{isResume ? "Resume" : "Report"}
 						</h2>
 						{onClose && (
-							<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
-								<XIcon className="size-4" />
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={onClose}
+								className="h-8 w-8 rounded-full shrink-0"
+							>
+								<XIcon className="h-4 w-4 text-muted-foreground" />
 								<span className="sr-only">Close report panel</span>
 							</Button>
 						)}
 					</div>
 
 					{!isResume && (
-						<div className="flex h-10 items-center justify-between gap-2 border-t border-b px-4 shrink-0">
+						<div className="flex h-10 items-center justify-between gap-2 border-b px-4 shrink-0">
 							<div className="min-w-0 flex-1">
 								<p className="truncate text-sm text-muted-foreground">
 									{reportContent?.title || title}
@@ -528,7 +533,7 @@ export function ReportPanelContent({
 							placeholder="Report content..."
 							editorVariant="default"
 							allowModeToggle={false}
-							reserveToolbarSpace
+							reserveToolbarSpace={isEditing}
 							defaultEditing={isEditing}
 							className="[&_[role=toolbar]]:!bg-sidebar"
 							// Show citation badges in view mode; raw `[citation:N]`
diff --git a/surfsense_web/components/ui/fixed-toolbar.tsx b/surfsense_web/components/ui/fixed-toolbar.tsx
index 40677e777..e11fae861 100644
--- a/surfsense_web/components/ui/fixed-toolbar.tsx
+++ b/surfsense_web/components/ui/fixed-toolbar.tsx
@@ -14,7 +14,7 @@ export function FixedToolbar({
 	return (
 		<Toolbar
 			className={cn(
-				"scrollbar-hide sticky top-0 left-0 z-10 w-full justify-between overflow-x-auto border-b bg-background/95 p-1 backdrop-blur supports-backdrop-filter:bg-background/60",
+				"scrollbar-hide absolute top-0 left-0 z-[60] w-full justify-between overflow-x-auto border-b bg-background p-1",
 				className
 			)}
 			{...props}