From 3c1cd6b64880f5c9561d19ef40086b293f4e529a Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Fri, 13 Sep 2024 09:40:27 +0000
Subject: [PATCH] fix(electron): pinned tab style (#8232)

fix PD-1687
---
 .../app-tabs-header/views/app-tabs-header.tsx | 26 +++++++++----------
 .../app-tabs-header/views/styles.css.ts       |  2 +-
 2 files changed, 13 insertions(+), 15 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 91882b39c5..d3cd48a45a 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
@@ -237,7 +237,7 @@ const WorkbenchTab = ({
                     <Loading />
                   )}
                 </div>
-                {workbench.pinned || !view.title ? null : (
+                {!view.title ? null : (
                   <div
                     title={view.title}
                     className={styles.splitViewLabelText}
@@ -254,19 +254,17 @@ const WorkbenchTab = ({
             </Fragment>
           );
         })}
-        {!workbench.pinned ? (
-          <div className={styles.tabCloseButtonWrapper}>
-            {tabsLength > 1 ? (
-              <button
-                data-testid="close-tab-button"
-                className={styles.tabCloseButton}
-                onClick={handleCloseTab}
-              >
-                <CloseIcon />
-              </button>
-            ) : null}
-          </div>
-        ) : null}
+        <div className={styles.tabCloseButtonWrapper}>
+          {tabsLength > 1 && !workbench.pinned ? (
+            <button
+              data-testid="close-tab-button"
+              className={styles.tabCloseButton}
+              onClick={handleCloseTab}
+            >
+              <CloseIcon />
+            </button>
+          ) : null}
+        </div>
       </div>
       <div className={styles.dropIndicator} data-edge={closestEdge} />
     </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 16cfe62de8..19309a6542 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
@@ -98,7 +98,7 @@ export const tab = style({
       boxShadow: cssVar('buttonShadow'),
     },
     '&[data-pinned="true"]': {
-      flexShrink: 0,
+      maxWidth: 64,
     },
     [`${tabWrapper}[data-dragging="true"] &`]: {
       boxShadow: `0 0 0 1px ${cssVar('primaryColor')}`,