From b8d03463711c57c6311f6ebc5d06effb1cefb509 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 25 Jul 2026 01:32:20 +0530
Subject: [PATCH] refactor(models-selection-panel): adjust height and border
 style for empty state display

---
 .../models-selection-panel.tsx                | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/settings/model-connections/models-selection-panel.tsx b/surfsense_web/components/settings/model-connections/models-selection-panel.tsx
index b6258b7b2..e31459c9e 100644
--- a/surfsense_web/components/settings/model-connections/models-selection-panel.tsx
+++ b/surfsense_web/components/settings/model-connections/models-selection-panel.tsx
@@ -109,10 +109,25 @@ export function ModelsSelectionPanel({
 				</div>
 			) : null}
 
-			<div className="h-80 overflow-y-auto rounded-xl border bg-muted/20 p-2">
+			<div
+				className={`overflow-y-auto rounded-xl border bg-muted/20 p-2 ${
+					models.length === 0 ? "h-auto border-dashed border-border/100" : "h-80"
+				}`}
+			>
 				{models.length === 0 ? (
-					<div className="rounded-lg px-3 py-6 text-center text-sm text-muted-foreground">
+					<div className="flex flex-col items-center gap-3 rounded-lg px-3 py-6 text-center text-sm text-muted-foreground">
 						{emptyMessage}
+						{onRefresh ? (
+							<Button
+								variant="secondary"
+								size="sm"
+								type="button"
+								onClick={onRefresh}
+								disabled={isRefreshing || isRefreshDisabled}
+							>
+								{isRefreshing ? "Refreshing..." : "Refresh"}
+							</Button>
+						) : null}
 					</div>
 				) : null}
 				{filteredModels.length === 0 && modelFilter ? (
@@ -128,12 +143,13 @@ export function ModelsSelectionPanel({
 					{filteredModels.map((model) => (
 						<div
 							key={model.id ?? model.model_id}
-							className="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-background"
+							className="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-popover"
 						>
 							<Checkbox
 								checked={model.enabled}
 								onCheckedChange={(checked) => onToggleModel?.(model, checked === true)}
 								disabled={!onToggleModel || isUpdatingModel}
+								className="border-muted-foreground/20"
 							/>
 							<div className="min-w-0 flex-1">
 								<div className="flex items-center gap-2 text-sm font-medium">