From 238f69b4e7ba8b86ba4ca3fe759d5027e8afdd48 Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <cfddream@gmail.com>
Date: Thu, 4 May 2023 13:46:56 +0800
Subject: [PATCH] fix(component): click area of the item (#2221)

Co-authored-by: Himself65 <himself65@outlook.com>
---
 .../pure/workspace-slider-bar/shared-styles.ts      |  7 ++++---
 apps/web/src/components/root-app-sidebar/index.tsx  | 13 +++++++++++--
 .../component/src/components/changeLog/index.css.ts |  3 +--
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
index 53a864ab5ddff..28a7f268791d9 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
@@ -9,7 +9,7 @@ export const StyledListItem = styled('div')<{
     color: active
       ? 'var(--affine-primary-color)'
       : 'var(--affine-text-primary-color)',
-    paddingLeft: '16px',
+    paddingLeft: '2px',
     paddingRight: '2px',
     borderRadius: '8px',
     cursor: 'pointer',
@@ -17,7 +17,7 @@ export const StyledListItem = styled('div')<{
     position: 'relative',
     flexShrink: 0,
     userSelect: 'none',
-    ...displayFlex('flex-start', 'center'),
+    ...displayFlex('flex-start', 'stretch'),
     ...(disabled
       ? {
           cursor: 'not-allowed',
@@ -25,8 +25,9 @@ export const StyledListItem = styled('div')<{
         }
       : {}),
 
-    '> svg, a > svg': {
+    'a > svg, div > svg': {
       fontSize: '20px',
+      marginLeft: '14px',
       marginRight: '12px',
       color: active
         ? 'var(--affine-primary-color)'
diff --git a/apps/web/src/components/root-app-sidebar/index.tsx b/apps/web/src/components/root-app-sidebar/index.tsx
index 1d91086b95107..aa689b153f66c 100644
--- a/apps/web/src/components/root-app-sidebar/index.tsx
+++ b/apps/web/src/components/root-app-sidebar/index.tsx
@@ -105,8 +105,17 @@ export const RootAppSidebar = ({
               onOpenQuickSearchModal();
             }, [onOpenQuickSearchModal])}
           >
-            <SearchIcon />
-            {t['Quick search']()}
+            <div
+              style={{
+                display: 'flex',
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+              }}
+            >
+              <SearchIcon />
+              {t['Quick search']()}
+            </div>
           </StyledListItem>
           <StyledListItem
             active={
diff --git a/packages/component/src/components/changeLog/index.css.ts b/packages/component/src/components/changeLog/index.css.ts
index 14eadbdc716c7..daeeea5f77143 100644
--- a/packages/component/src/components/changeLog/index.css.ts
+++ b/packages/component/src/components/changeLog/index.css.ts
@@ -69,7 +69,6 @@ export const changeLogSlideInStyle = style({
   // fixme: if width is 100% and marginLeft is 0,
   //  the UI will overflow on app sidebar
   width: '99%',
-  marginLeft: '2px',
   height: '32px',
   display: 'flex',
   justifyContent: 'space-between',
@@ -78,7 +77,7 @@ export const changeLogSlideInStyle = style({
   backgroundColor: 'var(--affine-tertiary-color)',
   border: '1px solid var(--affine-primary-color)',
   borderRight: 'none',
-  paddingLeft: '8px',
+  paddingLeft: '14px',
   borderRadius: '16px 0 0 16px',
   cursor: 'pointer',
   zIndex: 1001,