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>
This commit is contained in:
亢奋猫 2025-11-09 17:50:41 +08:00 committed by GitHub
parent d5826c2dc7
commit 66f66fe08e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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