From a5061cee934e5ad04a656f963b9505ec50fadf8e Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Fri, 18 Apr 2025 05:15:00 +0000
Subject: [PATCH] chore: adjust tag editor style (#11757)

close AF-2006
![CleanShot 2025-04-17 at 12 43 26@2x](https://github.com/user-attachments/assets/e7498ace-7294-410d-a2d3-83b92dbde036)
![CleanShot 2025-04-17 at 12 43 17@2x](https://github.com/user-attachments/assets/8617cea0-3200-4020-ad5b-b76a70680844)
---
 .../components/tags/inline-tag-list.css.ts    |  1 +
 .../core/src/components/tags/styles.css.ts    | 21 +++++++------------
 .../core/src/components/tags/tags-editor.tsx  | 11 +++++++++-
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/core/src/components/tags/inline-tag-list.css.ts b/packages/frontend/core/src/components/tags/inline-tag-list.css.ts
index 75359852cb..ea69af2dcc 100644
--- a/packages/frontend/core/src/components/tags/inline-tag-list.css.ts
+++ b/packages/frontend/core/src/components/tags/inline-tag-list.css.ts
@@ -5,4 +5,5 @@ export const inlineTagsContainer = style({
   gap: '6px',
   flexWrap: 'wrap',
   width: '100%',
+  alignItems: 'center',
 });
diff --git a/packages/frontend/core/src/components/tags/styles.css.ts b/packages/frontend/core/src/components/tags/styles.css.ts
index 0be163d1f4..ee9f2188b8 100644
--- a/packages/frontend/core/src/components/tags/styles.css.ts
+++ b/packages/frontend/core/src/components/tags/styles.css.ts
@@ -17,7 +17,7 @@ export const tagsEditorRoot = style({
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
-  gap: '12px',
+  gap: '4px',
 });
 
 export const tagsEditorRootMobile = style([
@@ -27,13 +27,6 @@ export const tagsEditorRootMobile = style([
   },
 ]);
 
-export const inlineTagsContainer = style({
-  display: 'flex',
-  gap: '6px',
-  flexWrap: 'wrap',
-  width: '100%',
-});
-
 export const tagsMenu = style({
   padding: 0,
   position: 'relative',
@@ -45,23 +38,25 @@ export const tagsMenu = style({
 
 export const tagsEditorSelectedTags = style({
   display: 'flex',
-  gap: '4px',
   flexWrap: 'wrap',
-  padding: '10px 12px',
-  backgroundColor: cssVarV2('input/background'),
+  padding: '10px 12px 0px',
   minHeight: 42,
   selectors: {
     [`${tagsEditorRootMobile} &`]: {
       borderRadius: 12,
+      paddingBottom: '10px',
       backgroundColor: cssVarV2('layer/background/primary'),
     },
   },
 });
 
+export const tagDivider = style({
+  borderBottomColor: cssVarV2('tab/divider/divider'),
+});
+
 export const searchInput = style({
   flexGrow: 1,
-  padding: '10px 0',
-  margin: '-10px 0',
+  height: '30px',
   border: 'none',
   outline: 'none',
   fontSize: '14px',
diff --git a/packages/frontend/core/src/components/tags/tags-editor.tsx b/packages/frontend/core/src/components/tags/tags-editor.tsx
index e7880f447d..922418ac34 100644
--- a/packages/frontend/core/src/components/tags/tags-editor.tsx
+++ b/packages/frontend/core/src/components/tags/tags-editor.tsx
@@ -1,4 +1,10 @@
-import { IconButton, Menu, RowInput, Scrollable } from '@affine/component';
+import {
+  Divider,
+  IconButton,
+  Menu,
+  RowInput,
+  Scrollable,
+} from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { MoreHorizontalIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
@@ -249,6 +255,9 @@ export const TagsEditor = ({
             placeholder="Type here ..."
           />
         </InlineTagList>
+        {BUILD_CONFIG.isMobileEdition ? null : (
+          <Divider size="thinner" className={styles.tagDivider} />
+        )}
       </div>
       <div className={styles.tagsEditorTagsSelector}>
         <div className={styles.tagsEditorTagsSelectorHeader}>