From 99b84cbc923ab61173ae9dfa2fd62bcf9064bc9e Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 13 Jul 2026 20:34:27 +0800
Subject: [PATCH] fix(sidebar): use available width for table names

---
 apps/desktop/src/components/sidebar/TreeItem.vue      |  4 ++--
 apps/desktop/src/lib/sidebar/sidebarTreeItemLayout.ts |  5 +++++
 packages/app-tests/sidebarTreeItemLayout.test.ts      | 11 ++++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/components/sidebar/TreeItem.vue b/apps/desktop/src/components/sidebar/TreeItem.vue
index 5e6b5c9f4..1116c06ba 100644
--- a/apps/desktop/src/components/sidebar/TreeItem.vue
+++ b/apps/desktop/src/components/sidebar/TreeItem.vue
@@ -73,7 +73,7 @@ import type { ColumnInfo, ConnectionConfig, DatabaseType, ObjectSourceKind, Tree
 import * as api from "@/lib/backend/api";
 import { uuid } from "@/lib/common/utils";
 import { resolveDefaultDatabase } from "@/lib/database/defaultDatabase";
-import { canTreeNodePin, canTreeNodeShowExpander, treeItemPaddingLeft, usesFullWidthTreeLabel } from "@/lib/sidebar/sidebarTreeItemLayout";
+import { canTreeNodePin, canTreeNodeShowExpander, treeItemPaddingLeft, treeLabelWidthClass, usesFullWidthTreeLabel } from "@/lib/sidebar/sidebarTreeItemLayout";
 import { buildTableSelectSql } from "@/lib/table/tableSelectSql";
 import { buildTableDeleteTemplate, buildTableInsertTemplate, buildTableSelectTemplate, buildTableUpdateTemplate } from "@/lib/table/tableSqlTemplates";
 import { connectionFilePath, defaultSqliteBackupFileName, isMemorySqlitePath, sqliteBackupSourcePath } from "@/lib/connection/connectionFile";
@@ -280,7 +280,6 @@ const emit = defineEmits<{
 const usesFullWidthLabel = computed(() => usesFullWidthTreeLabel(props.node.type, settingsStore.editorSettings.sidebarAllowHorizontalScroll));
 const sidebarTreeContext = inject(sidebarTreeContextKey, null);
 const rowWidthClass = computed(() => (usesFullWidthLabel.value ? "w-max min-w-full" : "w-full min-w-0"));
-const labelWidthClass = computed(() => (usesFullWidthLabel.value ? "shrink-0 whitespace-nowrap" : "min-w-0 truncate"));
 const nodeProductionContext = computed(() => {
   const connectionId = props.node.connectionId;
   return productionContextForDatabase(connectionId ? connectionStore.getConfig(connectionId) : undefined, props.node.database);
@@ -4192,6 +4191,7 @@ const tableComment = computed(() =>
     ? props.node.comment
     : null,
 );
+const labelWidthClass = computed(() => treeLabelWidthClass({ fullWidth: usesFullWidthLabel.value, hasTrailingComment: !!columnComment.value || !!tableComment.value }));
 const paddingLeft = computed(() => treeItemPaddingLeft(props.depth));
 const tableSearchParentId = computed(() => props.node.tableSearchParentId || "");
 const tableSearchValue = computed(() => {
diff --git a/apps/desktop/src/lib/sidebar/sidebarTreeItemLayout.ts b/apps/desktop/src/lib/sidebar/sidebarTreeItemLayout.ts
index cbdbe56ab..3a960c13e 100644
--- a/apps/desktop/src/lib/sidebar/sidebarTreeItemLayout.ts
+++ b/apps/desktop/src/lib/sidebar/sidebarTreeItemLayout.ts
@@ -56,6 +56,11 @@ export function usesFullWidthTreeLabel(type: TreeNodeType, allowHorizontalScroll
   return allowHorizontalScroll && fullWidthLabelTypes.has(type);
 }
 
+export function treeLabelWidthClass({ fullWidth, hasTrailingComment }: { fullWidth: boolean; hasTrailingComment: boolean }): string {
+  if (fullWidth) return "shrink-0 whitespace-nowrap";
+  return hasTrailingComment ? "min-w-0 flex-1 truncate" : "min-w-0 truncate";
+}
+
 export function canTreeNodeExpand(type: TreeNodeType): boolean {
   return !leafTypes.has(type);
 }
diff --git a/packages/app-tests/sidebarTreeItemLayout.test.ts b/packages/app-tests/sidebarTreeItemLayout.test.ts
index d2d9062ea..0758b2a3e 100644
--- a/packages/app-tests/sidebarTreeItemLayout.test.ts
+++ b/packages/app-tests/sidebarTreeItemLayout.test.ts
@@ -1,6 +1,6 @@
 import { test } from "vitest";
 import assert from "node:assert/strict";
-import { canTreeNodePin, canTreeNodeShowExpander } from "../../apps/desktop/src/lib/sidebar/sidebarTreeItemLayout.ts";
+import { canTreeNodePin, canTreeNodeShowExpander, treeLabelWidthClass } from "../../apps/desktop/src/lib/sidebar/sidebarTreeItemLayout.ts";
 
 test("mongodb collection rows can show an expander for metadata groups", () => {
   assert.equal(canTreeNodeShowExpander({ type: "mongo-collection", childCount: 0 }), true);
@@ -13,3 +13,12 @@ test("ZooKeeper root rows do not show an empty expander", () => {
 test("Nacos namespace rows can show the pin action", () => {
   assert.equal(canTreeNodePin("nacos-namespace"), true);
 });
+
+test("labels with trailing comments consume the available row width", () => {
+  assert.equal(treeLabelWidthClass({ fullWidth: false, hasTrailingComment: true }), "min-w-0 flex-1 truncate");
+  assert.equal(treeLabelWidthClass({ fullWidth: false, hasTrailingComment: false }), "min-w-0 truncate");
+});
+
+test("horizontal-scroll labels keep their intrinsic width", () => {
+  assert.equal(treeLabelWidthClass({ fullWidth: true, hasTrailingComment: true }), "shrink-0 whitespace-nowrap");
+});