Fix MCP server Copy button becoming invisible or hard to see

[shangxinyu1]

Summary

On the MCP server page, the Copy button becomes effectively invisible in some configurations.

In the reported case, the button is still present in the layout, but its styling is so faint or visually collapsed against the code block that users can barely see it or may think it is missing entirely.

Current behavior

• Open Settings > MCP server.
• View the generated config/code block.
• The Copy button is not clearly visible in some variants of the page.
• It can appear hidden, extremely low-contrast, or visually merged into the background.
• This makes the primary copy action hard to discover.

Expected behavior

The Copy button should remain clearly visible and discoverable across all MCP server config variants.

Suggested improvements:

• Ensure the Copy button has sufficient contrast against the code block and surrounding container.
• Reserve a stable visible area for the button regardless of config type or content length.
• Prevent the button from blending into the background or clipping against the edge of the block.
• Keep the copy affordance visually consistent across Codex, VS Code, and other MCP config modes.

Steps to reproduce

1. Open Settings.
2. Go to MCP server.
3. Switch between different config targets if applicable.
4. Inspect the code/config block area.
5. Observe that the Copy button may appear missing or extremely hard to see.

Notes

Screenshots are attached showing:

• one MCP server state where the Copy button is barely visible / effectively hidden
• another MCP server state where the Copy button is clearly visible as expected

Why this matters

Copying the MCP config is the main action on this page. If the button is hard to see, users may assume the feature is broken or that there is no copy support at all.

[lefarcen]

Hi @Nagendhra-web! 👋

PR #840 is now open and addresses the Copy button visibility issue. The fix adds:

• background: var(--bg-panel) for solid surface
• Border + subtle shadow for clear floating affordance
• Scoped inline style (no shared CSS impact)

The implementation looks clean — addressing the root cause (transparent background bleeding through) while preserving the button's ghost-class hover/disabled behavior elsewhere in the app. I'll run a deep review and will track progress in #840. This issue stays open until the fix lands.

Thanks for the clear reproduction and diagnosis in #742!

[lefarcen]

Hi @shangxinyu1 👋

PR #840 merged and shipped! The MCP Copy button now has a solid surface:

• Scoped CSS class .mcp-copy-btn with background: var(--bg-panel) + border + shadow
• Preserves .ghost hover behavior
• Visible in both light and dark themes

Can you verify the fix in your environment and confirm it's resolved? If it's still not working as expected, please reopen and share details.

Thanks for reporting this!

[lefarcen]

This looks like a good first issue for someone new to the project.

If you'd like to work on it, comment /claim below. The first /claim after the latest release gets it. Any comment, linked PR, or progress note keeps the claim active.

[lefarcen]

Hi @shangxinyu1 👋

The fix from PR #840 has been shipped for 48 hours with no reported issues. The MCP Copy button now has a solid visible surface in both light and dark themes.

Since there's been no reply indicating the problem persists, I'm closing this as resolved. If you later find the Copy button is still hard to see in your environment, please reopen this issue with details about your setup (theme, browser, OS).

Thanks again for the detailed bug report and screenshots — they made the fix straightforward!