From 5f672a07f2fab913894dfa4e52d3037831d20ca5 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 19 Jan 2026 20:41:26 +0530
Subject: [PATCH] refactor: enhance MCP connection forms and account list
 styling

- Updated MCPConnectForm and MCPConfig to improve layout and responsiveness.
- Adjusted text sizes and spacing for better readability across different screen sizes.
- Enhanced button labels for clarity when showing or hiding details.
- Improved styling for the ConnectorAccountsListView to ensure consistent appearance and user experience.
---
 .../components/mcp-connect-form.tsx            | 18 ++++++++++--------
 .../components/mcp-config.tsx                  | 10 ++++++----
 .../views/connector-accounts-list-view.tsx     | 12 ++++++------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
index b619b84e1..d67b9b49c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
@@ -176,8 +176,8 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 								<XCircle className="h-4 w-4 text-red-600" />
 							)}
 							<div className="flex-1">
-								<div className="flex items-center justify-between">
-									<AlertTitle className="text-sm">
+								<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
+									<AlertTitle className="text-xs sm:text-sm">
 										{testResult.status === "success" ? "Connection Successful" : "Connection Failed"}
 									</AlertTitle>
 									{testResult.tools.length > 0 && (
@@ -185,7 +185,7 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 											type="button"
 											variant="ghost"
 											size="sm"
-											className="h-6 px-2"
+											className="h-6 px-2 self-start sm:self-auto text-xs"
 											onClick={(e) => {
 												e.preventDefault();
 												e.stopPropagation();
@@ -195,25 +195,27 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 											{showDetails ? (
 												<>
 													<ChevronUp className="h-3 w-3 mr-1" />
-													Hide Details
+													<span className="hidden sm:inline">Hide Details</span>
+													<span className="sm:hidden">Hide</span>
 												</>
 											) : (
 												<>
 													<ChevronDown className="h-3 w-3 mr-1" />
-													Show Details
+													<span className="hidden sm:inline">Show Details</span>
+													<span className="sm:hidden">Show</span>
 												</>
 											)}
 										</Button>
 									)}
 								</div>
-								<AlertDescription className="text-xs mt-1">
+								<AlertDescription className="text-[10px] sm:text-xs mt-1">
 									{testResult.message}
 									{showDetails && testResult.tools.length > 0 && (
 										<div className="mt-3 pt-3 border-t border-green-500/20">
-											<p className="font-semibold mb-2">
+											<p className="font-semibold mb-2 text-[10px] sm:text-xs">
 												Available tools:
 											</p>
-											<ul className="list-disc list-inside text-xs space-y-0.5">
+											<ul className="list-disc list-inside text-[10px] sm:text-xs space-y-0.5">
 												{testResult.tools.map((tool) => (
 													<li key={tool.name}>{tool.name}</li>
 												))}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
index f7ca114ca..94696581b 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx
@@ -195,7 +195,7 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 								<XCircle className="h-4 w-4 text-red-600" />
 							)}
 							<div className="flex-1">
-								<div className="flex items-center justify-between">
+								<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
 									<AlertTitle className="text-sm">
 										{testResult.status === "success" ? "Connection Successful" : "Connection Failed"}
 									</AlertTitle>
@@ -204,7 +204,7 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 											type="button"
 											variant="ghost"
 											size="sm"
-											className="h-6 px-2"
+											className="h-6 px-2 self-start sm:self-auto text-xs"
 											onClick={(e) => {
 												e.preventDefault();
 												e.stopPropagation();
@@ -214,12 +214,14 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 											{showDetails ? (
 												<>
 													<ChevronUp className="h-3 w-3 mr-1" />
-													Hide Details
+													<span className="hidden sm:inline">Hide Details</span>
+													<span className="sm:hidden">Hide</span>
 												</>
 											) : (
 												<>
 													<ChevronDown className="h-3 w-3 mr-1" />
-													Show Details
+													<span className="hidden sm:inline">Show Details</span>
+													<span className="sm:hidden">Show</span>
 												</>
 											)}
 										</Button>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
index 2ded83284..fc1f76f66 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx
@@ -132,21 +132,21 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 						onClick={onAddAccount}
 						disabled={isConnecting || !isEnabled}
 						className={cn(
-							"flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg border-2 border-dashed text-left transition-all duration-200 shrink-0 self-center sm:self-auto sm:w-auto",
+							"flex items-center justify-center gap-1.5 h-8 px-3 rounded-md border-2 border-dashed text-xs sm:text-sm transition-all duration-200 shrink-0 w-full sm:w-auto",
 							!isEnabled
 								? "border-border/30 opacity-50 cursor-not-allowed"
-								: "border-primary/50 hover:bg-primary/5",
+								: "border-slate-400/20 dark:border-white/20 hover:bg-primary/5",
 							isConnecting && "opacity-50 cursor-not-allowed"
 						)}
 					>
-						<div className="flex h-5 w-5 sm:h-6 sm:w-6 items-center justify-center rounded-md bg-primary/10 shrink-0">
+						<div className="flex h-5 w-5 items-center justify-center rounded-md bg-primary/10 shrink-0">
 							{isConnecting ? (
-								<Loader2 className="size-3 sm:size-3.5 animate-spin text-primary" />
+								<Loader2 className="size-3 animate-spin text-primary" />
 							) : (
-								<Plus className="size-3 sm:size-3.5 text-primary" />
+								<Plus className="size-3 text-primary" />
 							)}
 						</div>
-						<span className="text-[11px] sm:text-[12px] font-medium">
+						<span className="text-xs sm:text-sm font-medium">
 							{isConnecting ? "Connecting" : buttonText}
 						</span>
 					</button>