Skip to content

Commit db4f6a7

Browse files
style: Make marketplace tags scrollable (RooCodeInc#1857)
* Make marketplace tags scrollable * Changeset
1 parent 39980e9 commit db4f6a7

File tree

2 files changed

+15
-1
lines changed

2 files changed

+15
-1
lines changed

.changeset/eighty-bugs-sin.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"claude-dev": patch
3+
---
4+
5+
Make tags section in marketplace scrollable

webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,8 +223,16 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
223223
display: "flex",
224224
gap: "6px",
225225
flexWrap: "nowrap",
226-
overflow: "hidden",
226+
overflowX: "auto",
227+
scrollbarWidth: "none",
227228
position: "relative",
229+
}}
230+
onScroll={(e) => {
231+
const target = e.currentTarget
232+
const gradient = target.querySelector(".tags-gradient") as HTMLElement
233+
if (gradient) {
234+
gradient.style.visibility = target.scrollLeft > 0 ? "hidden" : "visible"
235+
}
228236
}}>
229237
<span
230238
style={{
@@ -254,6 +262,7 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
254262
</span>
255263
))}
256264
<div
265+
className="tags-gradient"
257266
style={{
258267
position: "absolute",
259268
right: 0,

0 commit comments

Comments
 (0)