fix(settings): keep MCP client tabs scrollable without overlap

This commit is contained in:
Imzl-zl 2026-07-24 06:11:17 -07:00 committed by GitHub
parent 7cbbd4eff6
commit 3035800658
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 9 deletions

View File

@ -5395,15 +5395,15 @@ onUnmounted(cleanupPreviewEditor);
<div class="space-y-2">
<Label>{{ t("settings.mcpConfig") }}</Label>
<Tabs v-model="mcpConfigTab" class="space-y-3">
<TabsList class="grid h-auto w-full grid-cols-2 gap-1 overflow-visible group-data-horizontal/tabs:h-auto sm:grid-cols-4 xl:grid-cols-8">
<TabsTrigger value="claude" class="h-8 min-w-0 px-2">Claude Code</TabsTrigger>
<TabsTrigger value="cursor" class="h-8 min-w-0 px-2">Cursor</TabsTrigger>
<TabsTrigger value="trae" class="h-8 min-w-0 px-2">TRAE</TabsTrigger>
<TabsTrigger value="vscode" class="h-8 min-w-0 px-2">VS Code</TabsTrigger>
<TabsTrigger value="windsurf" class="h-8 min-w-0 px-2">Windsurf</TabsTrigger>
<TabsTrigger value="codex" class="h-8 min-w-0 px-2">Codex</TabsTrigger>
<TabsTrigger value="opencode" class="h-8 min-w-0 px-2">OpenCode</TabsTrigger>
<TabsTrigger value="cherry-studio" class="h-8 min-w-0 px-2">Cherry Studio</TabsTrigger>
<TabsList class="h-auto min-h-8 w-full min-w-0 max-w-full justify-start gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain group-data-horizontal/tabs:h-auto">
<TabsTrigger value="claude" class="h-7 flex-none shrink-0 px-2.5">Claude Code</TabsTrigger>
<TabsTrigger value="cursor" class="h-7 flex-none shrink-0 px-2.5">Cursor</TabsTrigger>
<TabsTrigger value="trae" class="h-7 flex-none shrink-0 px-2.5">TRAE</TabsTrigger>
<TabsTrigger value="vscode" class="h-7 flex-none shrink-0 px-2.5">VS Code</TabsTrigger>
<TabsTrigger value="windsurf" class="h-7 flex-none shrink-0 px-2.5">Windsurf</TabsTrigger>
<TabsTrigger value="codex" class="h-7 flex-none shrink-0 px-2.5">Codex</TabsTrigger>
<TabsTrigger value="opencode" class="h-7 flex-none shrink-0 px-2.5">OpenCode</TabsTrigger>
<TabsTrigger value="cherry-studio" class="h-7 flex-none shrink-0 px-2.5">Cherry Studio</TabsTrigger>
</TabsList>
<TabsContent value="claude" class="m-0">

View File

@ -109,6 +109,23 @@ describe("MCP policy settings state", () => {
expect(settingsDialogSource).toContain(":aria-checked=\"mcpExecutionMode === 'safe_write'\"");
expect(settingsDialogSource).toContain("onMcpExecutionModeKeydown($event, 'safe_write')");
});
it("keeps MCP client config tabs on a single scrollable row", () => {
const tabsStart = settingsDialogSource.indexOf('<Tabs v-model="mcpConfigTab"');
const tabsEnd = settingsDialogSource.indexOf("</TabsList>", tabsStart);
const tabsSource = settingsDialogSource.slice(tabsStart, tabsEnd);
expect(tabsStart).toBeGreaterThan(-1);
expect(tabsEnd).toBeGreaterThan(tabsStart);
expect(tabsSource).toContain("overflow-x-auto");
expect(tabsSource).toContain("min-w-0");
expect(tabsSource).toContain("max-w-full");
expect(tabsSource).toContain("overscroll-x-contain");
expect(tabsSource).not.toContain("flex-wrap");
expect(tabsSource).not.toContain("grid-cols-");
expect(tabsSource.match(/flex-none shrink-0/g)).toHaveLength(8);
expect(tabsSource).not.toContain("min-w-0 px-");
});
});
describe("MCP connection search", () => {