From db4f6a72c361edcf20fbd25b07ad0e9ad9754574 Mon Sep 17 00:00:00 2001
From: Frostbourne <frostbournesb@protonmail.com>
Date: Thu, 27 Feb 2025 15:54:51 -0800
Subject: [PATCH] style: Make marketplace tags scrollable (#1857)

* Make marketplace tags scrollable

* Changeset
---
 .changeset/eighty-bugs-sin.md                         |  5 +++++
 .../components/mcp/marketplace/McpMarketplaceCard.tsx | 11 ++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/eighty-bugs-sin.md

diff --git a/.changeset/eighty-bugs-sin.md b/.changeset/eighty-bugs-sin.md
new file mode 100644
index 0000000000..6eb2df7320
--- /dev/null
+++ b/.changeset/eighty-bugs-sin.md
@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Make tags section in marketplace scrollable
diff --git a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
index c908070fae..509d6a504e 100644
--- a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
+++ b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
@@ -223,8 +223,16 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 							display: "flex",
 							gap: "6px",
 							flexWrap: "nowrap",
-							overflow: "hidden",
+							overflowX: "auto",
+							scrollbarWidth: "none",
 							position: "relative",
+						}}
+						onScroll={(e) => {
+							const target = e.currentTarget
+							const gradient = target.querySelector(".tags-gradient") as HTMLElement
+							if (gradient) {
+								gradient.style.visibility = target.scrollLeft > 0 ? "hidden" : "visible"
+							}
 						}}>
 						<span
 							style={{
@@ -254,6 +262,7 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 							</span>
 						))}
 						<div
+							className="tags-gradient"
 							style={{
 								position: "absolute",
 								right: 0,