From e1acb7cd6cad7b29e2ad50f716805fffcc353d85 Mon Sep 17 00:00:00 2001
From: Daniel Riccio <ricciodaniel98@gmail.com>
Date: Fri, 13 Jun 2025 15:42:08 -0500
Subject: [PATCH] refactor: improve layout and styling in McpToolRow component

---
 webview-ui/src/components/mcp/McpToolRow.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/webview-ui/src/components/mcp/McpToolRow.tsx b/webview-ui/src/components/mcp/McpToolRow.tsx
index 93b15c9550..ca7a818a93 100644
--- a/webview-ui/src/components/mcp/McpToolRow.tsx
+++ b/webview-ui/src/components/mcp/McpToolRow.tsx
@@ -44,13 +44,15 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
 			}}>
 			<div
 				data-testid="tool-row-container"
-				style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}
+				className="flex items-center justify-between gap-4"
 				onClick={(e) => e.stopPropagation()}>
-				<div style={{ display: "flex", alignItems: "center" }}>
-					<span className="codicon codicon-symbol-method" style={{ marginRight: "6px" }}></span>
-					<span style={{ fontWeight: 500 }}>{tool.name}</span>
+				<div className="flex items-center min-w-0 flex-1">
+					<span className="codicon codicon-symbol-method mr-1.5 flex-shrink-0"></span>
+					<span className="font-medium truncate" title={tool.name}>
+						{tool.name}
+					</span>
 				</div>
-				<div className="flex items-center space-x-4">
+				<div className="flex items-center space-x-4 flex-shrink-0">
 					{" "}
 					{/* Wrapper for checkboxes */}
 					{serverName && (