Prerequisites

• Search the current open issues

What are you trying to do that currently feels hard or impossible?

The MCP Toolbox web UI tool list panel (.second-nav) is fixed at 250px wide and cannot be resized. This makes it difficult to use toolsets with long, descriptive tool names, as they are truncated, hard to identify, or force excessive horizontal scrolling. The fixed width also consumes too much viewport, limiting the main content area and reducing usability.

Suggested Solution(s)

Add a draggable vertical resize handle to the right edge of the tool list panel. Key features should include:

• Min width: 200px, Max width: 50% of viewport
• Visual feedback (ew-resize cursor)
• Persistence via localStorage
• Responsive resizing on window change
  Reference implementation: ADK Web project (ResizableDrawerDirective).

Alternatives Considered

• CSS-only resize property: Limited browser support and poor UX
• Collapsible panel: Only hides/shows panel, does not address width issues.
• Third party libraries: Could be heavier than required for this use-case.

Additional Details

Files to modify:

• internal/server/static/css/style.css
• internal/server/static/js/resize.js (new)
• internal/server/static/tools.html
• internal/server/static/toolsets.html

Estimated effort: Small (~100-150 lines of code). No breaking changes.

Reference implementation in ADK Web:

• adk-web/src/app/directives/resizable-drawer.directive.ts
• adk-web/src/app/directives/resizable-bottom.directive.ts

Research conducted: October 17, 2025
Researcher: Assistant via GitHub Copilot
Repository: googleapis/genai-toolbox