From 73769265531c28d6dea7f9ed1fff977578509070 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Thu, 19 Jun 2025 20:12:40 +0800
Subject: [PATCH] chore(core): adjust tab height and windows control, remove
 input background (#12862)

close AF-2697, AF-2696

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Made the AI chat input field background transparent for improved
visual consistency.
- Reduced the size of window app control buttons and removed extra
padding from the close button.
- Decreased the height of tabs and the width of the window app controls
placeholder for a more compact layout.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../blocksuite/ai/components/ai-chat-chips/add-popover.ts | 1 +
 .../core/src/components/pure/header/style.css.tsx         | 8 ++------
 .../core/src/modules/app-tabs-header/views/styles.css.ts  | 4 ++--
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/add-popover.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/add-popover.ts
index 97ad1c4317..89ecdd5868 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/add-popover.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-chips/add-popover.ts
@@ -93,6 +93,7 @@ export class ChatPanelAddPopover extends SignalWatcher(
       font-size: var(--affine-font-sm);
       color: ${unsafeCSSVarV2('text/primary')};
       flex-grow: 1;
+      background-color: transparent;
     }
     .search-input-wrapper input::placeholder {
       color: ${unsafeCSSVarV2('text/placeholder')};
diff --git a/packages/frontend/core/src/components/pure/header/style.css.tsx b/packages/frontend/core/src/components/pure/header/style.css.tsx
index 2d2c13aad6..657fe62734 100644
--- a/packages/frontend/core/src/components/pure/header/style.css.tsx
+++ b/packages/frontend/core/src/components/pure/header/style.css.tsx
@@ -63,17 +63,13 @@ export const windowAppControl = style({
   WebkitAppRegion: 'no-drag',
   cursor: 'pointer',
   display: 'inline-flex',
-  width: '52px',
-  height: '52px',
+  width: '40px',
+  height: '40px',
   alignItems: 'center',
   justifyContent: 'center',
   borderRadius: '0',
   color: 'var(--affine-icon-color)',
   selectors: {
-    '&[data-type="close"]': {
-      width: '56px',
-      paddingRight: '5px',
-    },
     '&[data-type="close"]:hover': {
       background: 'var(--affine-windows-close-button)',
       color: 'var(--affine-pure-white)',
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 7b672e8200..46a9cfe24e 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
@@ -78,7 +78,7 @@ export const tabWrapper = style({
 });
 
 export const tab = style({
-  height: 32,
+  height: 26,
   minWidth: 32,
   maxWidth: tabMaxWidth,
   width: 200,
@@ -243,7 +243,7 @@ export const spacer = style({
 });
 
 export const windowsAppControlsPlaceholder = style({
-  width: '160px',
+  width: '120px',
   height: '100%',
   flexShrink: 0,
 });