From 04534c20086c221ea1a4eec3a8e2cf25050101a5 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Thu, 27 Jul 2023 13:36:45 +0800
Subject: [PATCH] chore: adjust sidebar padding (#3397)

---
 .../collections/collections-list.tsx          |  1 +
 .../app-sidebar/menu-item/index.css.ts        | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx b/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
index 294aa2a99..15c411395 100644
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
@@ -193,6 +193,7 @@ const CollectionRenderer = ({
       />
       <MenuItem
         data-testid="collection-item"
+        data-type="collection-list-item"
         ref={setNodeRef}
         onCollapsedChange={setCollapsed}
         active={isOver}
diff --git a/packages/component/src/components/app-sidebar/menu-item/index.css.ts b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
index a10034bfa..66b621635 100644
--- a/packages/component/src/components/app-sidebar/menu-item/index.css.ts
+++ b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
@@ -8,7 +8,7 @@ export const root = style({
   minHeight: '30px',
   userSelect: 'none',
   cursor: 'pointer',
-  padding: '0 8px 0 12px',
+  padding: '0 12px',
   fontSize: 'var(--affine-font-sm)',
   margin: '2px 0',
   selectors: {
@@ -32,7 +32,20 @@ export const root = style({
     '&[data-collapsible="true"]': {
       width: 'calc(100% + 8px)',
       transform: 'translateX(-8px)',
-      paddingLeft: '8px',
+      paddingLeft: '4px',
+      paddingRight: '12px',
+    },
+    '&[data-type="collection-list-item"][data-collapsible="false"]:hover': {
+      width: 'calc(100% + 8px)',
+      transform: 'translateX(-8px)',
+      paddingLeft: '20px',
+      paddingRight: '12px',
+    },
+    '&[data-type="favorite-list-item"][data-collapsible="false"]:hover': {
+      width: 'calc(100% + 8px)',
+      transform: 'translateX(-8px)',
+      paddingLeft: '20px',
+      paddingRight: '12px',
     },
   },
 });
@@ -79,7 +92,7 @@ export const iconsContainer = style({
   flexShrink: 0,
   selectors: {
     '&[data-collapsible="true"]': {
-      width: '40px',
+      width: '44px',
     },
   },
 });