From 6d1c034052270af35d57d40ed304982b8507afc3 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Wed, 24 Jun 2026 22:42:04 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(sidebar):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E9=95=BF=E8=A1=A8=E5=90=8D=E6=A8=AA=E5=90=91=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=88=AA=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 取消 V2 对象树等宽标签自截断，支持横向滚动展示完整名称

- 提高对象树横向滚动宽度上限并补充回归测试
---
 .../src/components/Sidebar.locate-toolbar.test.tsx  | 13 ++++++++++++-
 frontend/src/components/sidebarV2Utils.ts           |  2 +-
 frontend/src/v2-theme.css                           |  9 +++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Sidebar.locate-toolbar.test.tsx b/frontend/src/components/Sidebar.locate-toolbar.test.tsx
index 6bc6cce..eaa2c1a 100644
--- a/frontend/src/components/Sidebar.locate-toolbar.test.tsx
+++ b/frontend/src/components/Sidebar.locate-toolbar.test.tsx
@@ -1064,6 +1064,8 @@ describe('Sidebar locate toolbar', () => {
     expect(css).toMatch(/\.gn-v2-tree-status::before \{[^}]*width: 7px;[^}]*height: 7px;[^}]*border-radius: 50%;/s);
     expect(css).toMatch(/\.gn-v2-tree-status\.is-success::before \{[^}]*background: #22c55e;[^}]*box-shadow: 0 0 0 4px rgba\(34, 197, 94, 0\.18\);/s);
     expect(css).toMatch(/\.gn-v2-tree-label \{[^}]*overflow: hidden;[^}]*text-overflow: ellipsis;/s);
+    expect(css).toMatch(/\.gn-v2-tree-title\.is-mono \{[^}]*width: max-content;[^}]*min-width: 100%;[^}]*flex: 0 0 auto;/s);
+    expect(css).toMatch(/\.gn-v2-tree-title\.is-mono \.gn-v2-tree-label \{[^}]*flex: 0 0 auto;[^}]*overflow: visible;[^}]*text-overflow: clip;/s);
     expect(css).toMatch(/\.gn-v2-tree-folder-icon \{[^}]*width: 22px;[^}]*height: 22px;[^}]*flex: 0 0 22px;/s);
     expect(css).not.toContain('.gn-v2-tree-connection-meta');
   });
@@ -1088,9 +1090,18 @@ describe('Sidebar locate toolbar', () => {
         type: 'table',
       },
     ] as any, 900);
+    const veryLongWidth = estimateV2TreeHorizontalScrollWidth([
+      {
+        title: `example.main.${'order_detail_with_long_business_suffix_'.repeat(6)}`,
+        key: 'table-very-long',
+        type: 'table',
+      },
+    ] as any, 320);
 
     expect(narrowWidth).toBeGreaterThan(260);
-    expect(narrowWidth).toBeLessThanOrEqual(960);
+    expect(narrowWidth).toBeLessThanOrEqual(2600);
+    expect(veryLongWidth).toBeGreaterThan(960);
+    expect(veryLongWidth).toBeLessThanOrEqual(2600);
     expect(wideWidth).toBeUndefined();
   });
 
diff --git a/frontend/src/components/sidebarV2Utils.ts b/frontend/src/components/sidebarV2Utils.ts
index a0ca69e..1cbd60a 100644
--- a/frontend/src/components/sidebarV2Utils.ts
+++ b/frontend/src/components/sidebarV2Utils.ts
@@ -323,7 +323,7 @@ const V2_EXPLORER_FILTER_GROUP_KEYS: Record<Exclude<V2ExplorerFilter, 'all'>, st
   events: ['events'],
 };
 
-const V2_TREE_HORIZONTAL_SCROLL_MAX_WIDTH = 960;
+const V2_TREE_HORIZONTAL_SCROLL_MAX_WIDTH = 2600;
 const V2_TREE_HORIZONTAL_SCROLL_BASE_WIDTH = 88;
 const V2_TREE_HORIZONTAL_SCROLL_INDENT_WIDTH = 24;
 const V2_TREE_HORIZONTAL_SCROLL_AVG_CHAR_WIDTH = 8;
diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css
index 574584b..b1a2493 100644
--- a/frontend/src/v2-theme.css
+++ b/frontend/src/v2-theme.css
@@ -2726,7 +2726,16 @@ body[data-ui-version="v2"] .gn-v2-tree-title {
   line-height: 1.25;
 }
 
+body[data-ui-version="v2"] .gn-v2-tree-title.is-mono {
+  width: max-content;
+  min-width: 100%;
+  flex: 0 0 auto;
+}
+
 body[data-ui-version="v2"] .gn-v2-tree-title.is-mono .gn-v2-tree-label {
+  flex: 0 0 auto;
+  overflow: visible;
+  text-overflow: clip;
   font-family: inherit;
   font-size: inherit;
   font-weight: 400 !important;