From f22df4b29c1552190fc323227ad3228804c191da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=B4=BA?= <wanghe@fit2cloud.com>
Date: Fri, 9 Oct 2026 17:16:10 +0800
Subject: [PATCH] fix(file): stabilize closable tab width to avoid layout
 jitter (#14013)

The closable card tabs animated the close icon width between active and inactive tabs, so each tab switch reflowed the tab bar and caused the page to jitter. Reserve the close icon slot and toggle it with opacity instead, matching the terminal tab implementation.
---
 .../src/views/host/file-management/index.vue  | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 297462a99..9af59a4f2 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -2851,6 +2851,36 @@ onBeforeUnmount(() => {
     border-bottom: 1px solid var(--el-border-color-light) !important;
 }
 
+/* Keep the closable tab width stable so switching tabs does not reflow the tab bar */
+:deep(.file-tabs .el-tabs__header .el-tabs__item.is-closable) {
+    padding: 0 20px;
+
+    .is-icon-close {
+        width: 14px;
+        margin-left: 5px;
+        right: 0;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--el-transition-duration);
+    }
+
+    &.is-active,
+    &:hover,
+    &:focus-within {
+        .is-icon-close {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+    @media (hover: none), (pointer: coarse) {
+        .is-icon-close {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+}
+
 :deep(.file-tabs .el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
     border-bottom-width: 1px !important;
 }