Edit mcpview

webview-ui/src/components/mcp/McpView.tsx

@@ -125,8 +125,8 @@ const McpView = ({ onDone }: McpViewProps) => {
 				bottom: 0,
 				display: "flex",
 				flexDirection: "column",
-				overflow: "hidden",
 			}}>
+			{/* Fixed Header */}
 			<div
 				style={{
 					display: "flex",
@@ -137,23 +137,38 @@ const McpView = ({ onDone }: McpViewProps) => {
 				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>MCP Servers</h3>
 				<VSCodeButton onClick={onDone}>Done</VSCodeButton>
 			</div>
-			<p style={{ padding: "0 20px", color: "var(--vscode-foreground)", fontSize: "13px" }}>
+
-				MCP (Model Context Protocol) enables AI models to access external tools and data through standardized
+			{/* Scrollable Content */}
-				interfaces. Add MCP servers to extend Claude's capabilities with custom functionality and real-time data
+			<div style={{ flex: 1, overflow: "auto", padding: "0 20px" }}>
-				access.
+				<p style={{ color: "var(--vscode-foreground)", fontSize: "13px" }}>
+					MCP (Model Context Protocol) enables AI models to access external tools and data through
+					standardized interfaces. Add MCP servers to extend Claude's capabilities with custom functionality
+					and real-time data access.
 				</p>
 
 				{/* Server List */}
-			<div style={{ flex: 1, overflow: "auto", padding: "0 20px" }}>
+				<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
 					{servers.map((server) => (
 						<ServerRow key={server.name} server={server} />
 					))}
-			</div>
 
-			{/* Add Server UI */}
+					{/* Add Server UI as a row */}
-			<div style={{ padding: "20px" }}>
 					{isAdding ? (
-					<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+						<div
+							style={{
+								padding: "12px",
+								background: "var(--vscode-list-hoverBackground)",
+								borderRadius: "4px",
+								display: "flex",
+								flexDirection: "column",
+								gap: "10px",
+							}}>
+							<b style={{ color: "var(--vscode-foreground)" }}>New MCP Server</b>
+							<p style={{ color: "var(--vscode-descriptionForeground)", fontSize: "13px", margin: "0" }}>
+								Enter the MCP server configuration in JSON format. You can find this configuration in
+								the setup instructions for your MCP server. The config defines how to start and connect
+								to the server, typically specifying a command and arguments.
+							</p>
 							<VSCodeTextArea
 								rows={4}
 								placeholder='{"mcpServers": {"server-name": {"command": "...", "args": [...]}}}'
@@ -162,9 +177,12 @@ const McpView = ({ onDone }: McpViewProps) => {
 							/>
 							<div style={{ display: "flex", gap: "10px" }}>
 								<VSCodeButton style={{ flex: 1 }} onClick={handleAddServer}>
-								Add Server
+									Save
 								</VSCodeButton>
-							<VSCodeButton style={{ flex: 1 }} appearance="secondary" onClick={() => setIsAdding(false)}>
+								<VSCodeButton
+									style={{ flex: 1 }}
+									appearance="secondary"
+									onClick={() => setIsAdding(false)}>
 									Cancel
 								</VSCodeButton>
 							</div>
@@ -176,6 +194,10 @@ const McpView = ({ onDone }: McpViewProps) => {
 						</VSCodeButton>
 					)}
 				</div>
+
+				{/* Add bottom padding for scrolling */}
+				<div style={{ height: "20px" }} />
+			</div>
 		</div>
 	)
 }
@@ -345,6 +367,7 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 							{isEditing ? (
 								<>
 									<VSCodeTextArea
+										rows={4}
 										value={editConfig}
 										onChange={(e) => setEditConfig((e.target as HTMLTextAreaElement).value)}
 										style={{ width: "100%" }}