ui: MCP server entries list overflows screen height, obscuring instructions #17

Problem Description

When there are many MCP server entries and the terminal window is not tall enough, the MCP server entries list overflows the available screen height, pushing the important keyboard instructions at the top of the view out of the visible area. This makes the interface difficult to use and hides critical navigation information from users.

Steps to Reproduce

1. Create multiple MCP server configuration files (10+ configs) in your MCP config directory
2. Run ccmcp in a terminal window with limited height (e.g., standard 24-line terminal)
3. Observe that the config list fills the screen completely
4. Notice that keyboard instructions ("Use ↑/↓ to navigate, Space to select...") at the top get pushed above the visible area
5. User cannot see important UI elements like the navigation instructions

Expected Behavior

• All UI elements should remain visible regardless of the number of MCP server entries
• Keyboard instructions should always be visible at the top
• Selection summary should always be visible at the bottom
• Config list should be scrollable within a constrained height area
• Users should be able to navigate through all configs while keeping the instructions in view

Actual Behavior

• With many configs, the list overflows the terminal height
• Important keyboard instructions at the top get pushed above the visible area
• The selection summary at the bottom may also get pushed below the visible area
• Users lose context about available keyboard commands and current selections

Suggested Solution

Modify the ConfigSelector.tsx component to:

1. Add height constraints to the config list area: Implement a maximum height for the config list container based on terminal dimensions
2. Enable scrolling within the constrained area: Allow users to scroll through configs while keeping other UI elements fixed
3. Reserve space for critical UI elements: Ensure header instructions and footer summary always remain visible
4. Consider using terminal height detection: Calculate available space dynamically

Technical Details

Affected Components:

• src/tui/ConfigSelector.tsx (lines 167-171: config list rendering)

Current Layout Structure:

<Box flexDirection="column" height="100%">
  {/* Header - instructions (lines 152-162) */}
  {/* Main content area - grows to fill space (lines 165-180) */}
  <Box flexGrow={1}>
    {/* Config list - currently unbounded (lines 167-171) */}
    <Box flexDirection="column" flexBasis="50%" marginRight={2}>
      {validConfigs.map(renderConfigItem)}
    </Box>
  </Box>
  {/* Footer - selection summary (lines 200-213) */}
</Box>

Implementation Approach:

1. Calculate available height for the config list area (total height minus header and footer)
2. Implement scrolling behavior for the config list when it exceeds the available space
3. Add scroll indicators to show when more configs are available above/below
4. Ensure the current selection remains visible when navigating

Acceptance Criteria

• Config list respects terminal height constraints
• Header instructions always remain visible
• Footer selection summary always remain visible
• Users can scroll through all configs using existing navigation keys
• Current selection indicator works correctly with scrolling
• Preview panel (when enabled) still functions properly
• Interface works correctly on various terminal sizes (from 24 lines to larger windows)

Additional Context

This issue affects usability especially for users with:

• Many MCP server configurations (common in development workflows)
• Smaller terminal windows or split-screen setups
• Terminals with standard default heights (24 lines)

The fix should maintain the existing keyboard navigation patterns while improving the visual layout to be more responsive to terminal dimensions.