From d4065fee786645a8b1d7f7c53aa9b59d1278668d Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Tue, 13 Aug 2024 08:06:30 +0000
Subject: [PATCH] fix(electron): adjust app-tabs-header styles (#7849)

---
 .../src/modules/app-tabs-header/views/app-tabs-header.tsx   | 1 +
 .../core/src/modules/app-tabs-header/views/styles.css.ts    | 6 +++---
 2 files changed, 4 insertions(+), 3 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 b8e300df9b..25aee614aa 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
@@ -208,6 +208,7 @@ const WorkbenchTab = ({
         data-testid="workbench-tab"
         data-active={tabActive}
         data-pinned={workbench.pinned}
+        data-padding-right={tabsLength > 1 && !workbench.pinned}
         className={styles.tab}
       >
         {workbench.views.map((view, viewIdx) => {
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 8a5f88247c..371f178af3 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
@@ -75,6 +75,7 @@ export const tabWrapper = style({
 export const tab = style({
   height: 32,
   minWidth: 32,
+  maxWidth: 200,
   overflow: 'clip',
   background: cssVar('backgroundSecondaryColor'),
   display: 'flex',
@@ -93,7 +94,7 @@ export const tab = style({
       background: cssVar('backgroundPrimaryColor'),
       boxShadow: cssVar('shadow1'),
     },
-    '&[data-pinned="false"]': {
+    '&[data-padding-right="true"]': {
       paddingRight: 20,
     },
     '&[data-pinned="true"]': {
@@ -113,7 +114,6 @@ export const splitViewLabel = style({
   gap: '4px',
   fontWeight: 500,
   alignItems: 'center',
-  maxWidth: 180,
   cursor: 'default',
   ':last-of-type': {
     paddingRight: 0,
@@ -172,7 +172,7 @@ export const tabCloseButtonWrapper = style({
   top: 0,
   bottom: 0,
   height: '100%',
-  width: 16,
+  width: 24,
   overflow: 'clip',
   display: 'flex',
   alignItems: 'center',