fix(lab): file name limit

weavefox · Jan 24, 2024 · 5be6ab6 · 5be6ab6
1 parent 0d2e041
commit 5be6ab6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/libro-lab/src/kernel-and-terminal-panel/collapse/index.less b/packages/libro-lab/src/kernel-and-terminal-panel/collapse/index.less
@@ -44,28 +44,36 @@
     font-size: 12px;
     margin: 8px 0;
     padding: 0 10px;
+    display: flex;
 
     .libro-panel-collapse-item-toggle {
       display: inline-block;
-      vertical-align: middle;
-      margin-right: 5px;
+      margin: auto 5px auto 0;
     }
 
     .libro-panel-collapse-item-icon,
     .libro-panel-collapse-kernel-item-icon {
       display: inline-block;
-      margin-right: 5px;
-      vertical-align: middle;
+      margin: auto 5px auto 0;
+
+      & > :first-child {
+        vertical-align: middle;
+      }
     }
 
     .libro-panel-collapse-item-label,
     .libro-panel-collapse-kernel-item-name {
       display: inline-block;
+      min-width: 50px;
+      white-space: nowrap; /* 避免文本换行 */
+      overflow: hidden; /* 隐藏超出div的内容 */
+      text-overflow: ellipsis; /* 在文本超出宽度时显示省略号 */
+      margin: auto 0;
     }
 
     .libro-panel-collapse-item-close {
       // display: inline-block;
-      float: right;
+      margin: auto 0 auto auto;
     }
 
     .libro-panel-collapse-item-close:hover {

diff --git a/packages/libro-lab/src/kernel-and-terminal-panel/collapse/page-collapse-content.tsx b/packages/libro-lab/src/kernel-and-terminal-panel/collapse/page-collapse-content.tsx
@@ -20,7 +20,7 @@ export const OpenedTabs: React.FC = () => {
                   {renderTitleIcon(item.title.icon)}
                 </span>
               )}
-              <div className="libro-panel-collapse-item-icon">
+              <div className="libro-panel-collapse-item-label">
                 {renderTitleLabel(item.title.label)}
               </div>
               {item.title.closable && (