[BUG] Long mcp tool names push mcp ui out of window

[DarkEden-coding]

Problem (one or two sentences)

When the user has a long mcp server name configured the name pushes the refresh, delete, and on off buttons out of the edge of the window (depending on window width)

A good fix would be to truncate the mcp name based on if it would push the ui outside of the window, allow hovering on the name to get a tooltip with full name if truncated.

Context (who is affected and when)

Users who have long mcp server names configured

Reproduction steps

Configure a long mcp server name, make it so that roo code is a small-ish panel and observe the mcp name pushing ui elements outside of the window

Expected result

Truncate mcp name if it would push ui outside of the window

Actual result

Mcp name pushes ui outside of window

Variations tried (optional)

No response

App Version

3.46.1

API Provider (optional)

None

Model Used (optional)

No response

Roo Code Task Links (optional)

No response

Relevant logs or errors (optional)

[roomote]

I've analyzed this issue and here's my proposed implementation plan:

Problem Analysis:
The issue is in the ServerRow component in webview-ui/src/components/mcp/McpView.tsx. The server name span uses flex: 1 to fill available space, but lacks overflow handling. When a server name is long, it pushes the action buttons (delete, refresh, status indicator, toggle) outside the visible window.

Proposed Changes:

1. Add text truncation to the server name container:

   • Add overflow: hidden, text-overflow: ellipsis, and white-space: nowrap to properly truncate long names
   • Use min-width: 0 to allow flex item to shrink below content size

2. Wrap the server name in a StandardTooltip:

   • Show the full server name on hover when it's truncated
   • The StandardTooltip component is already used elsewhere in this file

3. Ensure button container doesn't shrink:

   • Add flex-shrink: 0 to the buttons container to prevent it from being pushed out

Code Change (lines ~270-290):

<StandardTooltip content={server.name}>
    <span style={{ 
        flex: 1, 
        overflow: 'hidden', 
        textOverflow: 'ellipsis', 
        whiteSpace: 'nowrap',
        minWidth: 0 
    }}>
        {server.name}
        {server.source && (
            <span style={{...}}>
                {server.source}
            </span>
        )}
    </span>
</StandardTooltip>
<div style={{ 
    display: 'flex', 
    alignItems: 'center', 
    marginRight: '8px',
    flexShrink: 0  // Add this
}}>
    {/* buttons */}
</div>

This approach will truncate long MCP server names with an ellipsis and show the full name in a tooltip on hover, while ensuring the action buttons remain visible and accessible regardless of server name length.

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.

[DarkEden-coding]

@roomote this looks good

[roomote]

Thanks for the approval! I will start implementing the fix now - adding text truncation with tooltip support for long MCP server names. I will open a PR shortly with my attempt at addressing this.

[roomote]

Opened a draft PR with my attempt at addressing this: #11189

The fix truncates long MCP server names with an ellipsis and shows the full name in a tooltip on hover. The action buttons (delete, refresh, toggle) remain visible regardless of server name length.

Feedback welcome!