From 30358006581bbf3a35d4c4a17234d0b9bb593e58 Mon Sep 17 00:00:00 2001
From: Imzl-zl <69853158+Imzl-zl@users.noreply.github.com>
Date: Fri, 24 Jul 2026 06:11:17 -0700
Subject: [PATCH] fix(settings): keep MCP client tabs scrollable without
 overlap

---
 .../components/editor/EditorSettingsDialog.vue | 18 +++++++++---------
 .../__tests__/mcp/mcpPolicySelection.spec.ts   | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/desktop/src/components/editor/EditorSettingsDialog.vue b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
index 8ebe5d891..306447576 100644
--- a/apps/desktop/src/components/editor/EditorSettingsDialog.vue
+++ b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
@@ -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">
diff --git a/apps/desktop/src/lib/__tests__/mcp/mcpPolicySelection.spec.ts b/apps/desktop/src/lib/__tests__/mcp/mcpPolicySelection.spec.ts
index cac05360f..15a8eddd1 100644
--- a/apps/desktop/src/lib/__tests__/mcp/mcpPolicySelection.spec.ts
+++ b/apps/desktop/src/lib/__tests__/mcp/mcpPolicySelection.spec.ts
@@ -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", () => {