From 9c5a8c00b99837be53cdc4b5f71822b66badab1b Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 16 May 2026 19:16:28 +0530
Subject: [PATCH] refactor: improve error handling layout in CitationPanel and
 update Separator styling across multiple components for consistency

---
 .../components/citation-panel/citation-panel.tsx          | 8 +++++---
 surfsense_web/components/shared/image-config-dialog.tsx   | 2 +-
 surfsense_web/components/shared/llm-config-form.tsx       | 4 ++--
 surfsense_web/components/shared/vision-config-dialog.tsx  | 2 +-
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/surfsense_web/components/citation-panel/citation-panel.tsx b/surfsense_web/components/citation-panel/citation-panel.tsx
index a63efa296..890ac11ac 100644
--- a/surfsense_web/components/citation-panel/citation-panel.tsx
+++ b/surfsense_web/components/citation-panel/citation-panel.tsx
@@ -133,9 +133,11 @@ export const CitationPanelContent: FC<CitationPanelContentProps> = ({
 				)}
 
 				{error && (
-					<p className="py-8 text-sm text-destructive">
-						{error instanceof Error ? error.message : "Failed to load citation"}
-					</p>
+					<div className="flex min-h-full items-center justify-center text-center">
+						<p className="text-sm text-destructive">
+							{error instanceof Error ? error.message : "Failed to load citation"}
+						</p>
+					</div>
 				)}
 
 				{!isLoading && !error && data && (
diff --git a/surfsense_web/components/shared/image-config-dialog.tsx b/surfsense_web/components/shared/image-config-dialog.tsx
index 1b94f0a35..36d16081a 100644
--- a/surfsense_web/components/shared/image-config-dialog.tsx
+++ b/surfsense_web/components/shared/image-config-dialog.tsx
@@ -298,7 +298,7 @@ export function ImageConfigDialog({
 								/>
 							</div>
 
-							<Separator />
+							<Separator className="bg-popover-border" />
 
 							<div className="space-y-2">
 								<Label className="text-sm font-medium">Provider *</Label>
diff --git a/surfsense_web/components/shared/llm-config-form.tsx b/surfsense_web/components/shared/llm-config-form.tsx
index 6b00408cb..1356ed58f 100644
--- a/surfsense_web/components/shared/llm-config-form.tsx
+++ b/surfsense_web/components/shared/llm-config-form.tsx
@@ -404,7 +404,7 @@ export function LLMConfigForm({
 				{/* Advanced Parameters */}
 				{showAdvanced && (
 					<>
-						<Separator />
+						<Separator className="bg-popover-border" />
 						<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
 							<CollapsibleTrigger asChild>
 								<Button
@@ -443,7 +443,7 @@ export function LLMConfigForm({
 				)}
 
 				{/* System Instructions & Citations Section */}
-				<Separator />
+				<Separator className="bg-popover-border" />
 				<Collapsible open={systemInstructionsOpen} onOpenChange={setSystemInstructionsOpen}>
 					<CollapsibleTrigger asChild>
 						<Button
diff --git a/surfsense_web/components/shared/vision-config-dialog.tsx b/surfsense_web/components/shared/vision-config-dialog.tsx
index f8268562a..2646f3842 100644
--- a/surfsense_web/components/shared/vision-config-dialog.tsx
+++ b/surfsense_web/components/shared/vision-config-dialog.tsx
@@ -299,7 +299,7 @@ export function VisionConfigDialog({
 								/>
 							</div>
 
-							<Separator />
+							<Separator className="bg-popover-border" />
 
 							<div className="space-y-2">
 								<Label className="text-sm font-medium">Provider *</Label>