From e989cc0358ae8b452b77004f84eddbc0cfd19410 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Wed, 4 Feb 2026 17:03:29 +0000
Subject: [PATCH] fix: truncate long MCP server names with tooltip on hover

- Add text truncation styles (overflow, text-overflow, white-space) to server name
- Wrap server name span in StandardTooltip to show full name on hover
- Add flexShrink: 0 to buttons container to prevent it from being pushed out

Fixes #11188
---
 webview-ui/src/components/mcp/McpView.tsx | 43 ++++++++++++++---------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index 75a9a1a380..98c1225640 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -267,24 +267,33 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 						style={{ marginRight: "8px" }}
 					/>
 				)}
-				<span style={{ flex: 1 }}>
-					{server.name}
-					{server.source && (
-						<span
-							style={{
-								marginLeft: "8px",
-								padding: "1px 6px",
-								fontSize: "11px",
-								borderRadius: "4px",
-								background: "var(--vscode-badge-background)",
-								color: "var(--vscode-badge-foreground)",
-							}}>
-							{server.source}
-						</span>
-					)}
-				</span>
+				<StandardTooltip content={server.name}>
+					<span
+						style={{
+							flex: 1,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+							minWidth: 0,
+						}}>
+						{server.name}
+						{server.source && (
+							<span
+								style={{
+									marginLeft: "8px",
+									padding: "1px 6px",
+									fontSize: "11px",
+									borderRadius: "4px",
+									background: "var(--vscode-badge-background)",
+									color: "var(--vscode-badge-foreground)",
+								}}>
+								{server.source}
+							</span>
+						)}
+					</span>
+				</StandardTooltip>
 				<div
-					style={{ display: "flex", alignItems: "center", marginRight: "8px" }}
+					style={{ display: "flex", alignItems: "center", marginRight: "8px", flexShrink: 0 }}
 					onClick={(e) => e.stopPropagation()}>
 					<Button
 						variant="ghost"