From 338116fbd42fa12aad7c61fbdc5224b4916ecbb3 Mon Sep 17 00:00:00 2001
From: pashpashpash <nik@nugbase.com>
Date: Sat, 15 Feb 2025 17:23:08 -0800
Subject: [PATCH] consistent spacing with flexbox gap

---
 webview-ui/src/components/mcp/McpView.tsx     |  2 +-
 .../mcp/marketplace/McpMarketplaceCard.tsx    | 84 +++++++++++--------
 .../mcp/marketplace/McpMarketplaceView.tsx    |  5 +-
 3 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index c3f615efaa..f05f4d0546 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -112,7 +112,7 @@ const McpView = ({ onDone }: McpViewProps) => {
 					style={{
 						display: "flex",
 						gap: "1px",
-						padding: "0 8px 0 10px",
+						padding: "0 20px 0 20px",
 						borderBottom: "1px solid var(--vscode-panel-border)",
 					}}>
 					<TabButton isActive={activeTab === "marketplace"} onClick={() => setActiveTab("marketplace")}>
diff --git a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
index 32c566f8a4..dae8fa70ff 100644
--- a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
+++ b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
@@ -57,33 +57,43 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 					})
 				}}
 				style={{
-					padding: "12px 16px",
+					padding: "16px 20px",
+					display: "flex",
+					flexDirection: "column",
+					gap: 16,
 					cursor: isLoading ? "wait" : "pointer",
 				}}>
 				{/* Main container with logo and content */}
-				<div style={{ display: "flex", gap: "12px" }}>
+				<div style={{ display: "flex", gap: "16px" }}>
 					{/* Logo */}
 					{item.logoUrl && (
 						<img
 							src={item.logoUrl}
 							alt={`${item.name} logo`}
 							style={{
-								width: "32px",
-								height: "32px",
-								borderRadius: "4px",
+								width: 42,
+								height: 42,
+								borderRadius: 4,
 							}}
 						/>
 					)}
 
 					{/* Content section */}
-					<div style={{ flex: 1, minWidth: 0 }}>
+					<div
+						style={{
+							flex: 1,
+							minWidth: 0,
+							display: "flex",
+							flexDirection: "column",
+							justifyContent: "space-between",
+						}}>
 						{/* First row: name and install button */}
 						<div
 							style={{
 								display: "flex",
 								justifyContent: "space-between",
 								alignItems: "center",
-								gap: "12px",
+								gap: "16px",
 							}}>
 							<h3
 								style={{
@@ -116,43 +126,45 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 							style={{
 								display: "flex",
 								alignItems: "center",
-								gap: "6px",
+								gap: "12px",
 								fontSize: "12px",
 								color: "var(--vscode-descriptionForeground)",
 								marginTop: "2px",
 								flexWrap: "wrap",
 								minWidth: 0,
 							}}>
-							<div ref={githubLinkRef}>
-								<VSCodeLink
-									href={item.githubUrl}
-									title="View on GitHub"
+							<div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
+								<div ref={githubLinkRef}>
+									<VSCodeLink
+										href={item.githubUrl}
+										title="View on GitHub"
+										style={{
+											display: "flex",
+											alignItems: "center",
+											color: "var(--vscode-foreground)",
+											marginBottom: "-3px",
+											minWidth: 0,
+											opacity: 0.5,
+										}}
+										onMouseEnter={(e) => {
+											e.currentTarget.style.opacity = "0.8"
+										}}
+										onMouseLeave={(e) => {
+											e.currentTarget.style.opacity = "0.5"
+										}}>
+										<span className="codicon codicon-github" style={{ fontSize: "14px" }} />
+									</VSCodeLink>
+								</div>
+								<span
 									style={{
-										display: "flex",
-										alignItems: "center",
-										color: "var(--vscode-foreground)",
-										marginBottom: "-3px",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										wordBreak: "break-all",
 										minWidth: 0,
-										opacity: 0.5,
-									}}
-									onMouseEnter={(e) => {
-										e.currentTarget.style.opacity = "0.8"
-									}}
-									onMouseLeave={(e) => {
-										e.currentTarget.style.opacity = "0.5"
 									}}>
-									<span className="codicon codicon-github" style={{ fontSize: "14px" }} />
-								</VSCodeLink>
+									{item.author}
+								</span>
 							</div>
-							<span
-								style={{
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									wordBreak: "break-all",
-									minWidth: 0,
-								}}>
-								{item.author}
-							</span>
 							<span style={{ color: "var(--vscode-descriptionForeground)", flexShrink: 0 }}>|</span>
 							<div
 								style={{
@@ -188,8 +200,8 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 				</div>
 
 				{/* Description and tags */}
-				<div style={{ marginTop: "8px" }}>
-					<p style={{ margin: "0 0 4px 0", fontSize: "13px" }}>{item.description}</p>
+				<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+					<p style={{ fontSize: "13px", margin: 0 }}>{item.description}</p>
 					<div
 						style={{
 							display: "flex",
diff --git a/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx b/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx
index 2b34c90194..28e1e440a6 100644
--- a/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx
+++ b/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx
@@ -165,7 +165,7 @@ const McpMarketplaceView = () => {
 				flexDirection: "column",
 				width: "100%",
 			}}>
-			<div style={{ padding: "16px 16px 5px 16px" }}>
+			<div style={{ padding: "20px 20px 5px", display: "flex", flexDirection: "column", gap: "16px" }}>
 				{/* Search row */}
 				<VSCodeTextField
 					style={{ width: "100%" }}
@@ -177,7 +177,6 @@ const McpMarketplaceView = () => {
 						className="codicon codicon-search"
 						style={{
 							fontSize: 13,
-							marginTop: 2.5,
 							opacity: 0.8,
 						}}
 					/>
@@ -204,7 +203,6 @@ const McpMarketplaceView = () => {
 						display: "flex",
 						alignItems: "center",
 						gap: "8px",
-						marginTop: "8px",
 					}}>
 					<span
 						style={{
@@ -240,7 +238,6 @@ const McpMarketplaceView = () => {
 					style={{
 						display: "flex",
 						gap: "8px",
-						marginTop: "8px",
 					}}>
 					<span
 						style={{