From b3b5e7cf29c4469b87af713dc1009f25f1376603 Mon Sep 17 00:00:00 2001
From: vrustx <279631638@qq.com>
Date: Fri, 17 Jul 2026 00:46:33 +0800
Subject: [PATCH] fix(layout): wrap deep connection group path in editor
 toolbar

---
 apps/desktop/src/components/layout/EditorToolbar.vue      | 6 ++++--
 .../lib/common/__tests__/searchableSelectLayout.spec.ts   | 8 ++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/components/layout/EditorToolbar.vue b/apps/desktop/src/components/layout/EditorToolbar.vue
index f19c6c0eef..eb90a716b3 100644
--- a/apps/desktop/src/components/layout/EditorToolbar.vue
+++ b/apps/desktop/src/components/layout/EditorToolbar.vue
@@ -329,7 +329,7 @@ function databaseOptionIsProduction(database: string): boolean {
           trigger-class="font-medium text-foreground"
           :display-name="connectionDisplayName"
           list-class="w-96 max-w-[calc(100vw-2rem)]"
-          item-class="h-9"
+          item-class="min-h-9 h-auto py-1"
           @update:model-value="(connectionId) => emit('changeConnection', connectionId)"
         >
           <template #trigger-label="{ label }">
@@ -344,7 +344,9 @@ function databaseOptionIsProduction(database: string): boolean {
             <div class="flex min-w-0 items-center gap-2">
               <DatabaseIcon :db-type="connectionIconType(connectionById(option))" class="h-3.5 w-3.5 shrink-0" />
               <div class="flex min-w-0 flex-1 items-center gap-2">
-                <TruncatedTextTooltip :text="connectionGroupLabel(option)" class="block min-w-0 max-w-48 shrink-0 rounded-sm bg-muted/70 px-1.5 py-0.5 text-[11px] text-muted-foreground" side="left" :side-offset="8" />
+                <span class="block min-w-0 max-w-48 shrink-0 whitespace-normal break-words rounded-sm bg-muted/70 px-1.5 py-0.5 text-[11px] leading-tight text-muted-foreground">
+                  {{ connectionGroupLabel(option) }}
+                </span>
                 <TruncatedTextTooltip :text="label" class="block min-w-[7rem] flex-1 text-sm font-medium" side="left" :side-offset="8" />
               </div>
             </div>
diff --git a/apps/desktop/src/lib/common/__tests__/searchableSelectLayout.spec.ts b/apps/desktop/src/lib/common/__tests__/searchableSelectLayout.spec.ts
index 634d336800..8b3942cb6c 100644
--- a/apps/desktop/src/lib/common/__tests__/searchableSelectLayout.spec.ts
+++ b/apps/desktop/src/lib/common/__tests__/searchableSelectLayout.spec.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 
 const searchableSelectSource = readFileSync(new URL("../../../components/ui/searchable-select/SearchableSelect.vue", import.meta.url), "utf8");
 const dataTransferDialogSource = readFileSync(new URL("../../../components/transfer/DataTransferDialog.vue", import.meta.url), "utf8");
+const editorToolbarSource = readFileSync(new URL("../../../components/layout/EditorToolbar.vue", import.meta.url), "utf8");
 
 describe("SearchableSelect layout", () => {
   it("keeps slotted option labels inside a shrinkable overflow boundary", () => {
@@ -18,4 +19,11 @@ describe("SearchableSelect layout", () => {
     expect(truncatedConnectionLabels).toHaveLength(2);
     expect(fixedConnectionIcons).toHaveLength(2);
   });
+
+  it("wraps deep connection group paths without hiding connection names", () => {
+    expect(editorToolbarSource).toContain('item-class="min-h-9 h-auto py-1"');
+    expect(editorToolbarSource).toMatch(/<span class="[^"]*max-w-48[^"]*shrink-0[^"]*whitespace-normal[^"]*break-words[^"]*">\s*\{\{ connectionGroupLabel\(option\) \}\}\s*<\/span>/);
+    expect(editorToolbarSource).toContain('<TruncatedTextTooltip :text="label" class="block min-w-[7rem] flex-1 text-sm font-medium"');
+    expect(editorToolbarSource).not.toContain('<TruncatedTextTooltip :text="connectionGroupLabel(option)"');
+  });
 });