scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-05 08:10:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

consistent spacing with flexbox gap

Browse source
This commit is contained in:
pashpashpash 2025-02-15 17:23:08 -08:00
parent 89603d3e92
commit 338116fbd4
3 changed files with 50 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webview-ui/src/components/mcp/McpView.tsx
View file

@ -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")}>

84
webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
View file

@ -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",

5
webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx
View file

@ -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={{