Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Oct 10, 2025

Description

Fixed the excessive spacing issue in the MCP Playground UI where there was too much vertical spacing between the connection/configuration buttons and the Activity History/response area.

Problem

As shown in the issue screenshot, users experienced an unnecessarily large gap between the connection controls (Reconnect/Disconnect buttons) and the response content below, making the UI feel disconnected and less professional.

Solution

Reduced the marginTop property in the mcpPlaygroundWrapper CSS class for both the Publisher and Developer portals:

Publisher Portal (TryOutConsole.jsx)

  • Added marginTop: theme.spacing(-2) to compensate for the Paper component's padding
  • This reduces the spacing by 16px, pulling the playground content closer to the top

Developer Portal (MCPTryOut.jsx)

  • Changed from marginTop: theme.spacing(2) to theme.spacing(0)
  • This removes the 16px gap completely, creating a more compact layout

Impact

  • Visual: More compact and professional appearance with better visual flow
  • Functional: No functional changes - purely cosmetic CSS adjustments
  • Compatibility: Maintains responsive design and theme compatibility
  • Risk: Very low - changes are easily reversible and affect only spacing

Files Changed

  • portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/TryOut/TryOutConsole.jsx
  • portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/MCPTryOut/MCPTryOut.jsx

Testing

To verify the fix:

  1. Create and deploy an MCP server in the Publisher portal
  2. Navigate to the Try Out page
  3. Confirm that the spacing between the configuration section and Activity History is now more compact and visually balanced
  4. Repeat the same steps in the Developer portal

Closes #[issue_number]

Original prompt

This section details on the original issue you should resolve

<issue_title>[MCP] Spacing issue in MCP Playground</issue_title>
<issue_description>### Description

Line spacing between the button and the response is too much

Image

Steps to Reproduce

  1. Create, deploy and try out MCP server within the publisher portal

Version

4.6.0

Environment Details (with versions)

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes wso2/api-manager#4381


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@sonarqubecloud
Copy link

Please retry analysis of this Pull-Request directly on SonarQube Cloud

Copilot AI changed the title [WIP] Fix spacing issue between button and response in MCP Playground Fix excessive spacing in MCP Playground between connection section and response area Oct 10, 2025
Copilot AI requested a review from AnuGayan October 10, 2025 12:18
Copilot finished work on behalf of AnuGayan October 10, 2025 12:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[MCP] Spacing issue in MCP Playground

3 participants