From 24d3bfbccb95ff3779928e8f8c15f6d9986fd22a Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Mon, 17 Feb 2025 19:50:35 -0800
Subject: [PATCH] Adjust styling

---
 .../components/mcp/marketplace/McpMarketplaceCard.tsx    | 9 +++++----
 .../components/mcp/marketplace/McpMarketplaceView.tsx    | 7 +++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
index 18840f2b70..45383e68d2 100644
--- a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
+++ b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
@@ -56,14 +56,14 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 					})
 				}}
 				style={{
-					padding: "16px 20px",
+					padding: "14px 16px",
 					display: "flex",
 					flexDirection: "column",
-					gap: 16,
+					gap: 12,
 					cursor: isLoading ? "wait" : "pointer",
 				}}>
 				{/* Main container with logo and content */}
-				<div style={{ display: "flex", gap: "16px" }}>
+				<div style={{ display: "flex", gap: "12px" }}>
 					{/* Logo */}
 					{item.logoUrl && (
 						<img
@@ -130,6 +130,7 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 								color: "var(--vscode-descriptionForeground)",
 								flexWrap: "wrap",
 								minWidth: 0,
+								rowGap: 0, // Add this to remove vertical gap
 							}}>
 							<a
 								href={item.githubUrl}
@@ -197,7 +198,7 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 				</div>
 
 				{/* Description and tags */}
-				<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+				<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
 					<p style={{ fontSize: "13px", margin: 0 }}>{item.description}</p>
 					<div
 						style={{
diff --git a/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx b/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx
index 29a2502135..2271e1d17d 100644
--- a/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx
+++ b/webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx
@@ -182,17 +182,20 @@ const McpMarketplaceView = () => {
 							color: "var(--vscode-descriptionForeground)",
 							textTransform: "uppercase",
 							fontWeight: 500,
+							flexShrink: 0,
 						}}>
 						Filter:
 					</span>
 					<div
 						style={{
-							// transform: "scale(0.9)",
-							// transformOrigin: "left center",
 							position: "relative",
 							zIndex: 2,
+							flex: 1,
 						}}>
 						<VSCodeDropdown
+							style={{
+								width: "100%",
+							}}
 							value={selectedCategory || ""}
 							onChange={(e) => setSelectedCategory((e.target as HTMLSelectElement).value || null)}>
 							<VSCodeOption value="">All Categories</VSCodeOption>