From 66f66fe08ea8ebaa3d8561746b14b29b787e4c8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=A2=E5=A5=8B=E7=8C=AB?= <kangfenmao@qq.com>
Date: Sun, 9 Nov 2025 17:50:41 +0800
Subject: [PATCH] fix: prevent MCP card description text from overflowing
 dialog width (#11203)

* fix: prevent MCP card description text from overflowing dialog width

Add whitespace-pre-wrap and break-all classes to the MCP server description
text in Agent Settings to ensure long descriptions wrap properly within the
dialog bounds instead of causing layout overflow issues.

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: display MCP server logo in Agent Settings tooling section

Add logo display support for MCP servers in the Agent Settings tooling
section. When a server has a logoUrl defined, it will now be shown next
to the server name as a 20x20px rounded image, matching the design
pattern used in MCPSettings.

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../AgentSettings/ToolingSettings.tsx         | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/pages/settings/AgentSettings/ToolingSettings.tsx b/src/renderer/src/pages/settings/AgentSettings/ToolingSettings.tsx
index e353799c5b..40dc2249a6 100644
--- a/src/renderer/src/pages/settings/AgentSettings/ToolingSettings.tsx
+++ b/src/renderer/src/pages/settings/AgentSettings/ToolingSettings.tsx
@@ -459,11 +459,22 @@ export const ToolingSettings: FC<AgentToolingSettingsProps> = ({ agentBase, upda
                     key={server.id}
                     className="border border-default-200"
                     title={
-                      <div className="flex items-center justify-between gap-2">
-                        <div className="flex min-w-0 flex-col">
-                          <span className="truncate font-medium text-sm">{server.name}</span>
+                      <div className="flex items-center justify-between gap-2 py-3">
+                        <div className="flex min-w-0 flex-col gap-1">
+                          <div className="flex items-center gap-2">
+                            {server.logoUrl && (
+                              <img
+                                src={server.logoUrl}
+                                alt={`${server.name} logo`}
+                                className="h-5 w-5 rounded object-cover"
+                              />
+                            )}
+                            <span className="truncate font-medium text-sm">{server.name}</span>
+                          </div>
                           {server.description ? (
-                            <span className="line-clamp-2 text-foreground-500 text-xs">{server.description}</span>
+                            <span className="line-clamp-2 whitespace-pre-wrap break-all text-foreground-500 text-xs">
+                              {server.description}
+                            </span>
                           ) : null}
                         </div>
                         <Switch