fix(settings): keep MCP client tabs scrollable without overlap
This commit is contained in:
parent
7cbbd4eff6
commit
3035800658
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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", () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue