From bf9d536757586a28a17a4102b7d43d3c6f3ebbf9 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 16 Jul 2026 13:58:45 +0530
Subject: [PATCH] refactor(artifacts-panel): improve header layout and button
 styles for better UI consistency

---
 .../chat-artifacts/ui/artifacts-panel.tsx     | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/surfsense_web/features/chat-artifacts/ui/artifacts-panel.tsx b/surfsense_web/features/chat-artifacts/ui/artifacts-panel.tsx
index 7b3567d73..8c5b575ad 100644
--- a/surfsense_web/features/chat-artifacts/ui/artifacts-panel.tsx
+++ b/surfsense_web/features/chat-artifacts/ui/artifacts-panel.tsx
@@ -70,19 +70,25 @@ export function ArtifactsPanelContent({ onClose }: { onClose?: () => void }) {
 
 	return (
 		<>
-			<div className="flex h-12 shrink-0 items-center justify-between border-b px-3">
-				<h2 className="select-none text-lg font-semibold">Artifacts</h2>
-				{onClose && (
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={onClose}
-						className="h-8 w-8 shrink-0 rounded-full text-muted-foreground hover:text-accent-foreground"
-					>
-						<XIcon className="h-4 w-4" />
-						<span className="sr-only">Close artifacts panel</span>
-					</Button>
-				)}
+			<div className="shrink-0">
+				<div className="grid h-12 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b px-4">
+					<div className="min-w-0 flex flex-1 items-center gap-2">
+						<p className="truncate text-sm text-muted-foreground">Artifacts</p>
+					</div>
+					<div className="flex items-center gap-1 shrink-0">
+						{onClose && (
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={onClose}
+								className="size-6 shrink-0 rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+							>
+								<XIcon className="size-4" />
+								<span className="sr-only">Close artifacts panel</span>
+							</Button>
+						)}
+					</div>
+				</div>
 			</div>
 			<ArtifactGroups artifacts={artifacts} />
 		</>