fix(component): click area of the item (#2221)

Co-authored-by: Himself65 <himself65@outlook.com>
toeverything · May 4, 2023 · 238f69b · 238f69b · vercel · May 4, 2023
1 parent 3d43e61
commit 238f69b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 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
@@ -9,24 +9,25 @@ 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',
     marginBottom: '4px',
     position: 'relative',
     flexShrink: 0,
     userSelect: 'none',
-    ...displayFlex('flex-start', 'center'),
+    ...displayFlex('flex-start', 'stretch'),
     ...(disabled
       ? {
           cursor: 'not-allowed',
           color: 'var(--affine-border-color)',
         }
       : {}),
 
-    '> 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
@@ -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
@@ -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,