From 908f2cfaa53530ff67372e2a2e6cc81ee61461b9 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 12 May 2026 17:57:44 +0800
Subject: [PATCH] feat(sidebar): show tooltip on truncated names and enable
 horizontal scroll (closes #231)

Add a shadcn-vue Tooltip to tree nodes that only activates when the
label text is truncated. Enable horizontal scrolling on the sidebar
tree container for deeply nested long names.
---
 src/components/sidebar/ConnectionTree.vue |  4 ++--
 src/components/sidebar/TreeItem.vue       | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/sidebar/ConnectionTree.vue b/src/components/sidebar/ConnectionTree.vue
index 8604ea4764..435a095a94 100644
--- a/src/components/sidebar/ConnectionTree.vue
+++ b/src/components/sidebar/ConnectionTree.vue
@@ -247,7 +247,7 @@ function onSearchToggle(node: TreeNode) {
     </div>
     <RecycleScroller
       v-if="flatNodes.length > 0 && useVirtualTree"
-      class="connection-tree-scroller min-h-0 flex-1 overflow-y-auto"
+      class="connection-tree-scroller min-h-0 flex-1 overflow-y-auto overflow-x-auto"
       :items="flatNodes"
       :item-size="SIDEBAR_TREE_ROW_HEIGHT"
       :buffer="SIDEBAR_TREE_SCROLL_BUFFER"
@@ -268,7 +268,7 @@ function onSearchToggle(node: TreeNode) {
         />
       </template>
     </RecycleScroller>
-    <div v-else-if="flatNodes.length > 0" class="min-h-0 flex-1 overflow-y-auto">
+    <div v-else-if="flatNodes.length > 0" class="min-h-0 flex-1 overflow-y-auto overflow-x-auto">
       <TreeItem
         v-for="item in flatNodes"
         :key="item.id"
diff --git a/src/components/sidebar/TreeItem.vue b/src/components/sidebar/TreeItem.vue
index bc8382bffa..b2811a4f83 100644
--- a/src/components/sidebar/TreeItem.vue
+++ b/src/components/sidebar/TreeItem.vue
@@ -99,8 +99,14 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 const { t } = useI18n();
+const labelRef = ref<HTMLElement>();
+const isTruncated = computed(() => {
+  const el = labelRef.value;
+  return !!el && el.scrollWidth > el.clientWidth;
+});
 const connectionStore = useConnectionStore();
 const queryStore = useQueryStore();
 const savedSqlStore = useSavedSqlStore();
@@ -1533,7 +1539,12 @@ const isDragging = computed(() => dragState.active && dragState.draggedId === pr
             @click.stop
             @vue:mounted="($event: any) => $event.el.focus()"
           />
-          <span v-else class="min-w-0 flex-1 truncate">{{ displayLabel(node) }}</span>
+          <Tooltip v-else :disabled="!isTruncated">
+            <TooltipTrigger as-child>
+              <span ref="labelRef" class="min-w-0 flex-1 truncate">{{ displayLabel(node) }}</span>
+            </TooltipTrigger>
+            <TooltipContent side="right" :side-offset="8">{{ displayLabel(node) }}</TooltipContent>
+          </Tooltip>
           <span
             v-if="
               (node.type === 'group-tables' ||