Add independent vertical scroll to Tools tab columns

[patriciomartinns]

Summary

Fix scroll behavior in Tools tab by adding independent vertical scrolling to each column, preventing users from having to scroll the entire page.

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Refactoring (no functional changes)
• Test updates
• Build/CI improvements

Changes Made

• ToolsTab.tsx: Added fixed height to the TabsContent and enabled flex layout with overflow-y-auto for the details panel
• ListPane.tsx: Updated container to use flexbox layout with independent scroll for the items list

Related Issues

N/A

Testing

• Tested in UI mode
• Tested in CLI mode
• Tested with STDIO transport
• Tested with SSE transport
• Tested with Streamable HTTP transport
• Added/updated automated tests
• Manual testing performed

Test Results and/or Instructions

1. Connect to any MCP server with multiple tools
2. Navigate to the Tools tab
3. Observe that both columns now have independent scroll

Test Results:

• npm test: All 443 tests pass
• npm run test:e2e: All 16 e2e tests pass

Checklist

• Code follows the style guidelines (ran npm run prettier-fix)
• Self-review completed
• Code is commented where necessary
• Documentation updated (README, comments, etc.)

Breaking Changes

None

Additional Context

This change improves the user experience when working with MCP servers that have many tools or tools with long outputs.

Related PR: #690 also addresses layout issues in ToolsTab.tsx with a different approach (focused on parameter display debugging). This PR takes a broader approach by enabling independent scroll for both columns of the Tools tab. Maintainers may want to consider consolidating these layout improvements.