From 810ea9c42181864c3e8b9d451da208e46aae6bc8 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 1 Jul 2025 15:45:32 +0800
Subject: [PATCH] style: Handle overflow for node names with ellipsis
 truncation (#9360)

---
 .../components/Sidebar/components/Collapse.vue     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/layout/components/Sidebar/components/Collapse.vue b/frontend/src/layout/components/Sidebar/components/Collapse.vue
index f8e8a9683..b02373e46 100644
--- a/frontend/src/layout/components/Sidebar/components/Collapse.vue
+++ b/frontend/src/layout/components/Sidebar/components/Collapse.vue
@@ -14,7 +14,7 @@
                     <el-badge is-dot :value="taskCount" :show-zero="false" :offset="[5, 5]">
                         <el-button link @click="openChangeNode" @mouseenter="openChangeNode">
                             <SvgIcon class="icon" iconName="p-gerenzhongxin1" />
-                            {{ loadCurrentName() }}
+                            <span class="ellipsis-text">{{ loadCurrentName() }}</span>
                         </el-button>
                     </el-badge>
                 </div>
@@ -121,10 +121,7 @@ const loadCurrentName = () => {
         if (globalStore.currentNode === 'local') {
             return i18n.global.t('xpack.node.master');
         }
-        if (globalStore.currentNode.length <= 15) {
-            return globalStore.currentNode;
-        }
-        return globalStore.currentNode.substring(0, 12) + '...';
+        return globalStore.currentNode;
     }
     return i18n.global.t('xpack.node.master');
 };
@@ -315,4 +312,11 @@ onMounted(() => {
 .dropdown-item:hover {
     background: var(--el-menu-item-bg-color-active);
 }
+.ellipsis-text {
+    display: inline-block;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 </style>