From 812fdd27b56e3f3ffabcb85575450a89c20fdecc Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Wed, 31 Jul 2024 07:03:27 +0000
Subject: [PATCH] fix: tab label overflow style when there is only one tab
 (#7665)

before
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/d610e543-db1d-4671-a9f4-a31480f26dd7.png)

after
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/ab1c53b7-8cdd-443b-9371-fdf9bb6c85ae.png)
---
 .../src/modules/app-tabs-header/views/app-tabs-header.tsx | 8 ++++----
 .../core/src/modules/app-tabs-header/views/styles.css.ts  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx b/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
index 09cf0f050cce8..fda509f0451a4 100644
--- a/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
+++ b/packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx
@@ -125,8 +125,8 @@ const WorkbenchTab = ({
           </Fragment>
         );
       })}
-      {!workbench.pinned && tabsLength > 1 ? (
-        <div className={styles.tabCloseButtonWrapper}>
+      <div className={styles.tabCloseButtonWrapper}>
+        {!workbench.pinned && tabsLength > 1 ? (
           <button
             data-testid="close-tab-button"
             className={styles.tabCloseButton}
@@ -134,8 +134,8 @@ const WorkbenchTab = ({
           >
             <CloseIcon />
           </button>
-        </div>
-      ) : null}
+        ) : null}
+      </div>
     </div>
   );
 };
diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
index 3b0384454d400..f359f00a257eb 100644
--- a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
+++ b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
@@ -148,7 +148,7 @@ export const tabCloseButtonWrapper = style({
   paddingRight: 4,
   justifyContent: 'flex-end',
   selectors: {
-    [`${tab}:is([data-active=true], :hover) &`]: {
+    [`${tab}:is([data-active=true], :hover) &:not(:empty)`]: {
       width: 40,
     },
     [`${tab}[data-active=true] &`]: {