From f6fd6aced400ba962ae9f5a383c2bcddafbe4d26 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 9 Jul 2026 23:40:02 -0700 Subject: [PATCH] FN-7763: fix oversized icons and spacing on MCP servers settings page Fixes inline lucide icons on the MCP servers settings card that rendered oversized (24px default) and misaligned since .btn > svg is intentionally unsized globally. - Size inline lucide icons in McpServersCard with new --icon-size-sm/md-aligned constants (14px/16px) instead of relying on unsized default - Apply sizing to Add secret reference, Add server, Scan again, Test, Override, Edit, Upload JSON, and Copy Fusion MCP JSON buttons - Add regression test coverage in SettingsModal.mcp.test.tsx asserting icon sizes - Add changeset documenting the fix Files changed: .changeset/fn-7763-mcp-layout.md | 7 +++++ .../__tests__/SettingsModal.mcp.test.tsx | 34 ++++++++++++++++++++++ .../settings/sections/McpServersCard.tsx | 23 ++++++++++----- 3 files changed, 56 insertions(+), 8 deletions(-) Fusion-Task-Id: FN-7763 Fusion-Task-Lineage: 163dcba0-5189-49dd-9100-8a0bd3bc92b1 Co-authored-by: Fusion (runfusion.ai) --- .changeset/fn-7763-mcp-layout.md | 7 ++++ .../__tests__/SettingsModal.mcp.test.tsx | 34 +++++++++++++++++++ .../settings/sections/McpServersCard.tsx | 23 ++++++++----- 3 files changed, 56 insertions(+), 8 deletions(-) create mode 100644 .changeset/fn-7763-mcp-layout.md diff --git a/.changeset/fn-7763-mcp-layout.md b/.changeset/fn-7763-mcp-layout.md new file mode 100644 index 0000000000..96849d1e84 --- /dev/null +++ b/.changeset/fn-7763-mcp-layout.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Fix oversized icons and spacing on the MCP servers settings page. +category: fix +dev: McpServersCard inline lucide icons now use --icon-size-sm/md token values; .btn > svg is unsized globally so they previously fell back to lucide's 24px default. diff --git a/packages/dashboard/app/components/__tests__/SettingsModal.mcp.test.tsx b/packages/dashboard/app/components/__tests__/SettingsModal.mcp.test.tsx index a3b641b0a0..0b4228ecb3 100644 --- a/packages/dashboard/app/components/__tests__/SettingsModal.mcp.test.tsx +++ b/packages/dashboard/app/components/__tests__/SettingsModal.mcp.test.tsx @@ -64,6 +64,13 @@ function mockFetch(statusByName: Record | null }) { let currentForm: Settings = options.form ?? ({} as Settings); const addToast = vi.fn(); @@ -144,6 +151,33 @@ describe("MCP Settings UI", () => { expect(screen.getByText("No MCP servers configured.")).toBeInTheDocument(); }); + it.each(["global", "project"] as const)("sizes MCP card inline button icons in %s scope", async (scope) => { + mockFetch({}, { [scope]: discoveredResponse(scope) }); + renderCard({ + scope, + form: { mcpServers: { enabled: true, servers: [{ name: `${scope}-local`, transport: "stdio", command: "node" }] } } as Settings, + globalSettings: scope === "project" ? { mcpServers: { enabled: true, servers: [{ name: "shared", transport: "stdio", command: "node" }] } } : undefined, + }); + + expectButtonIconSize(screen.getByRole("button", { name: /Add server/i }), "16"); + const discovery = await screen.findByTestId(`mcp-discovery-${scope}`); + expectButtonIconSize(within(discovery).getByRole("button", { name: /Scan again/i }), "14"); + expectButtonIconSize(screen.getByRole("button", { name: /Upload JSON/i }), "14"); + expectButtonIconSize(screen.getByRole("button", { name: /Copy Fusion MCP JSON/i }), "14"); + + const localRow = await screen.findByTestId(`mcp-server-row-${scope}-local`); + expectButtonIconSize(within(localRow).getByRole("button", { name: /Test/i }), "14"); + expectButtonIconSize(within(localRow).getByRole("button", { name: /^Edit$/i }), "14"); + if (scope === "project") { + const inheritedRow = await screen.findByTestId("mcp-server-row-shared"); + expectButtonIconSize(within(inheritedRow).getByRole("button", { name: /Override/i }), "14"); + } + + fireEvent.click(screen.getByRole("button", { name: /Add server/i })); + const editor = await screen.findByTestId("mcp-server-editor"); + expectButtonIconSize(within(editor).getByRole("button", { name: /Add secret reference/i }), "14"); + }); + it.each(["stdio", "sse", "streamable-http"] as const)("adds, edits, and removes a %s server without plaintext secrets", async (transport) => { const { getForm } = renderCard({ scope: "project", form: {} as Settings }); await screen.findByText("No MCP servers configured."); diff --git a/packages/dashboard/app/components/settings/sections/McpServersCard.tsx b/packages/dashboard/app/components/settings/sections/McpServersCard.tsx index a7af32ecff..5ba427f5f1 100644 --- a/packages/dashboard/app/components/settings/sections/McpServersCard.tsx +++ b/packages/dashboard/app/components/settings/sections/McpServersCard.tsx @@ -95,6 +95,13 @@ export interface McpServersCardProps { } const EMPTY_MCP_SETTINGS: McpServersSettings = { enabled: false, servers: [] }; +/* +FNXC:McpConfig 2026-07-09-00:00: +MCP-card buttons render inline lucide icons at the standard --icon-size-sm/--icon-size-md token values so icons align with button labels and match the rest of Settings. +The global .btn > svg selector is intentionally unsized, so inline icons must opt in here or they fall back to lucide's 24px default. +*/ +const MCP_BUTTON_ICON_SIZE_SM = 14; +const MCP_BUTTON_ICON_SIZE_MD = 16; let rowCounter = 0; function nextRowId(): string { @@ -518,7 +525,7 @@ export function McpServersCard({ scope, form, setForm, globalSettings, projectId {row.required ? null : } ))} - + {secretsError ?

{secretsError}

: null} ); @@ -530,7 +537,7 @@ export function McpServersCard({ scope, form, setForm, globalSettings, projectId
{scope === "global" ? t("settings.mcp.globalTitle", "Global MCP servers") : t("settings.mcp.projectTitle", "Project MCP servers")}

{scope === "global" ? t("settings.mcp.globalDescription", "Configure MCP servers shared by all projects. Project settings may override or disable these servers by name.") : t("settings.mcp.projectDescription", "Configure project-specific MCP servers, overrides, and disabled inherited servers.")}

- +