MCP server settings command block renders with selection-like highlights

[NightGlowww]

Environment

• Open Design desktop: 0.11.0
• Bundle identifier: io.open-design.desktop
• macOS: 27.0 (26A5353q)
• Display observed on: built-in Liquid Retina XDR display

Steps to reproduce

1. Open Open Design desktop.
2. Go to Settings -> MCP server.
3. Select Claude Code in the CLI command dropdown.
4. Look at the generated command block under Run this in your terminal.

Actual behavior

The generated claude mcp add-json ... command is displayed inside a dark code block, but the wrapped command lines render with light/white rectangular highlights behind the text. It looks like the command content is permanently selected, or that selection/highlight styles are leaking into the normal display state.

This makes the command harder to read and makes the MCP server setup UI look visually broken.

Expected behavior

The command should render as normal monospaced code with stable contrast and no selection-like highlight unless the user is actively selecting text. Long generated commands should either wrap cleanly or scroll horizontally without highlight artifacts or clipping.

Notes

I am not attaching the original screenshot because it contains local filesystem paths. The issue is visible in the default MCP server settings view before pressing the Copy button. A possible area to check is the command display component styling around pre/code/textarea selection styles, forced user-select, or wrapped-line background handling.

[open-design-bot]

🎉 ✨ Welcome to Open Design, @NightGlowww!

✨ 🔥 Lit the spark.

🌱 Every contribution adds energy to the project. Thanks for showing up and helping Open Design grow.

💛 Thanks for helping Open Design grow. Keep building in the open. 🚀

🔗 Share on X (English) · 分享到 X（中文）

[lefarcen]

Hey @NightGlowww — thanks for the clear repro and for calling out the privacy-sensitive screenshot detail.

I dug through the MCP settings renderer and this does look like a real UI bug. The command snippet in Settings currently renders as a plain <pre><code> block, while the app also has a global code style that adds its own background, padding, and rounded corners. On a wrapped bash one-liner like claude mcp add-json ..., that combination would explain the selection-like light rectangles you're seeing behind each wrapped segment.

We've tagged this as a bug. A focused fix should be to keep the dark <pre> surface for the snippet, but reset the nested <code> styling in this panel so block snippets don't inherit the inline-code highlight treatment.

[lefarcen]

If anyone from the community wants to take this on, feel free to comment /claim and pick it up.
This looks nicely scoped to the MCP settings snippet UI.

[NightGlowww]

Adding the screenshot for the rendering issue:

[maxmilian]

/claim

Confirmed your diagnosis, @lefarcen. The MCP snippet renders as <pre style="…dark bg…"><code>{snippet}</code></pre> in SettingsDialog.tsx (the IntegrationsSection MCP setup card), but the inner <code> has no style override, so the global code rule in primitives.css (background: var(--bg-subtle) + padding: 1px 5px + border-radius) leaks in. With the bash one-liner wrapping (white-space: pre-wrap; word-break: break-all), each wrapped fragment paints its own light rounded rectangle — the "selection-like highlights".

Plan: reset the inner <code> to a transparent, padding-less, inherit-color/font wrapper so it stops inheriting the inline-code chip styling. This fixes every CLI snippet (Claude Code / Codex / …) since they share the block. Will add a regression check that the rendered <code> background is not the inline-chip background, plus a before/after screenshot.

[lefarcen]

Thanks for picking this up, @maxmilian — your diagnosis and fix direction line up nicely with what we were seeing.
Roughly how long do you think it'll take: a few hours, 1–3 days, about a week, or longer?

[lefarcen]

Heads-up: PR #4516 is now open from @maxmilian.

It applies the scoped inner-code reset we discussed in SettingsDialog.tsx, and adds a UI regression test that checks the MCP snippet stays transparent instead of inheriting the inline-code chip background/padding. Keeping this issue open until the PR lands.