fix: improve MCP settings buttons layout for responsive design

- Add flexWrap to button container to allow wrapping on smaller screens
- Change buttons from fixed flex:1 to flex: 1 1 auto with minWidth
- Ensures buttons maintain minimum readable width of 120px
- Prevents button text from being truncated on narrow viewports

Author: daniel-lxs

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

@@ -119,10 +119,17 @@ const McpView = ({ onDone }: McpViewProps) => {
 						)}
 
 						{/* Edit Settings Buttons */}
-						<div style={{ marginTop: "10px", width: "100%", display: "flex", gap: "10px" }}>
+						<div
+							style={{
+								marginTop: "10px",
+								width: "100%",
+								display: "flex",
+								flexWrap: "wrap",
+								gap: "10px",
+							}}>
 							<Button
 								variant="secondary"
-								style={{ flex: 1 }}
+								style={{ flex: "1 1 auto", minWidth: "120px" }}
 								onClick={() => {
 									vscode.postMessage({ type: "openMcpSettings" })
 								}}>
@@ -131,7 +138,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 							</Button>
 							<Button
 								variant="secondary"
-								style={{ flex: 1 }}
+								style={{ flex: "1 1 auto", minWidth: "120px" }}
 								onClick={() => {
 									vscode.postMessage({ type: "openProjectMcpSettings" })
 								}}>
@@ -140,7 +147,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 							</Button>
 							<Button
 								variant="secondary"
-								style={{ flex: 1 }}
+								style={{ flex: "1 1 auto", minWidth: "120px" }}
 								onClick={() => {
 									vscode.postMessage({ type: "refreshAllMcpServers" })
 								}}>