Fix excessive spacing in MCP Playground between connection section and response area

[Copilot]

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

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]

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[bot]]

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