refactor(agent-setup): improve button accessibility, enhance layout responsiveness, and update descriptions for clarity

surfsense_web/components/mcp/agent-setup-tabs.tsx

@@ -30,18 +30,17 @@ function CopyButton({ text }: { text: string }) {
 		<Button
 			variant="ghost"
 			size="sm"
-			className="absolute top-2 right-2 h-7 gap-1.5 px-2 text-xs"
+			className="absolute top-2 right-2 size-7 p-0"
 			onClick={handleCopy}
-			aria-label="Copy configuration"
+			aria-label={copied ? "Configuration copied" : "Copy configuration"}
 		>
-			{copied ? <Check className="size-3.5 text-brand" /> : <Copy className="size-3.5" />}
+			{copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
-			{copied ? "Copied" : "Copy"}
 		</Button>
 	);
 }
 
 const TRANSPORTS: { id: McpTransport; label: string; hint: string }[] = [
-	{ id: "remote", label: "Hosted", hint: "mcp.surfsense.com — nothing to install" },
+	{ id: "remote", label: "Hosted", hint: "mcp.surfsense.com, nothing to install" },
 	{ id: "stdio", label: "Self-host", hint: "run the server against your own backend" },
 ];
 
@@ -64,7 +63,7 @@ export function AgentSetupTabs({ options }: { options?: Partial<McpSnippetOption
 	const active = TRANSPORTS.find((t) => t.id === transport) ?? TRANSPORTS[0];
 
 	return (
-		<div className="space-y-4">
+		<div className="min-w-0 space-y-4">
 			<div className="flex flex-wrap items-center gap-3">
 				<div className="inline-flex rounded-lg border bg-muted/40 p-0.5">
 					{TRANSPORTS.map((t) => (
@@ -83,19 +82,21 @@ export function AgentSetupTabs({ options }: { options?: Partial<McpSnippetOption
 				<span className="text-xs text-muted-foreground">{active.hint}</span>
 			</div>
 
-			<Tabs defaultValue={MCP_CLIENTS[0].id} className="w-full">
+			<Tabs defaultValue={MCP_CLIENTS[0].id} className="min-w-0 w-full">
-				<TabsList className="flex h-auto flex-wrap justify-start gap-1">
+				<div className="w-full max-w-full overflow-x-auto overscroll-x-contain">
-					{MCP_CLIENTS.map((client) => (
+					<TabsList className="flex h-auto w-max min-w-full flex-nowrap justify-start gap-1">
-						<TabsTrigger key={client.id} value={client.id}>
+						{MCP_CLIENTS.map((client) => (
-							{client.label}
+							<TabsTrigger key={client.id} value={client.id}>
-						</TabsTrigger>
+								{client.label}
-					))}
+							</TabsTrigger>
-				</TabsList>
+						))}
+					</TabsList>
+				</div>
 				{MCP_CLIENTS.map((client) => {
 					const snippet = client[transport];
 					const config = snippet.build(resolved);
 					return (
-						<TabsContent key={client.id} value={client.id} className="space-y-3">
+					<TabsContent key={client.id} value={client.id} className="min-w-0 space-y-3">
 							<ol className="list-decimal space-y-1 pl-5 text-sm leading-relaxed text-muted-foreground">
 								{snippet.steps.map((step) => (
 									<li key={step}>{step}</li>

surfsense_web/components/mcp/connect-agent-dialog.tsx

@@ -41,13 +41,11 @@ export function ConnectAgentDialog({ className }: { className?: string }) {
 					<SidebarButtonBadge>New</SidebarButtonBadge>
 				</span>
 			</DialogTrigger>
-			<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="max-h-[85vh] min-w-0 overflow-x-hidden overflow-y-auto sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Connect to Claude Code, Codex, OpenCode…</DialogTitle>
 					<DialogDescription>
-						The SurfSense MCP server gives any coding agent these scrapers and your knowledge base
+						Give your coding agent access to SurfSense scrapers and your knowledge base. Create an API key under API Keys, choose your agent, then paste the config.
-						as native tools. You need an API key (create one under API Keys) — then pick your agent
-						and paste its config.
 					</DialogDescription>
 				</DialogHeader>
 				<AgentSetupTabs options={{ baseUrl: BACKEND_URL || undefined }} />

surfsense_web/components/ui/context-menu.tsx

@@ -66,7 +66,7 @@ function ContextMenuSubContent({
 		<ContextMenuPrimitive.SubContent
 			data-slot="context-menu-sub-content"
 			className={cn(
-				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md p-1 shadow-lg",
+				"bg-popover text-popover-foreground border border-popover-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md p-1 shadow-lg",
 				className
 			)}
 			{...props}
@@ -83,7 +83,7 @@ function ContextMenuContent({
 			<ContextMenuPrimitive.Content
 				data-slot="context-menu-content"
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md p-1 shadow-md",
+					"bg-popover text-popover-foreground border border-popover-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md p-1 shadow-md",
 					className
 				)}
 				{...props}