starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-10-12 16:00:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(file): stabilize closable tab width to avoid layout jitter (#14013)

Browse Source 
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.
This commit is contained in:
王贺
2026-10-09 17:16:10 +08:00
committed by GitHub
parent b9bab90a14
commit f22df4b29c
1 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/host/file-management/index.vue
+30
View File
@@ -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;
}