From 39497146185769156c9d5d3ea94e533f09fb1067 Mon Sep 17 00:00:00 2001
From: Kieran Cui <78460423+cuikaipeng@users.noreply.github.com>
Date: Wed, 16 Jul 2025 15:16:55 +0800
Subject: [PATCH] fix(core): optimize settings dialog's left sidebar scroll
 style (#13237)

change from scrolling the entire left side to scrolling menu items

**before**


https://github.com/user-attachments/assets/85d5c518-5160-493e-9010-431e6f0ed51b



**after**


https://github.com/user-attachments/assets/2efcdfde-7005-4d38-8dfb-2aef5e123946




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

## Summary by CodeRabbit

* **New Features**
* Added vertical scrolling with a visible scrollbar to the settings
sidebar for easier navigation of setting groups.

* **Style**
* Updated sidebar padding and spacing for improved layout and
appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../dialogs/setting/setting-sidebar/index.tsx | 20 ++++++++++++-------
 .../setting/setting-sidebar/style.css.ts      |  3 ++-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx
index e255503fca..fc2672ac63 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/index.tsx
@@ -1,3 +1,4 @@
+import { Scrollable } from '@affine/component';
 import { Avatar } from '@affine/component/ui/avatar';
 import { UserPlanButton } from '@affine/core/components/affine/auth/user-plan-button';
 import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
@@ -225,13 +226,18 @@ export const SettingSidebar = ({
         </Suspense>
       ) : null}
 
-      {groups.map(group => (
-        <SettingSidebarGroup
-          key={group.key}
-          title={group.title}
-          items={group.items}
-        />
-      ))}
+      <Scrollable.Root>
+        <Scrollable.Viewport>
+          {groups.map(group => (
+            <SettingSidebarGroup
+              key={group.key}
+              title={group.title}
+              items={group.items}
+            />
+          ))}
+          <Scrollable.Scrollbar />
+        </Scrollable.Viewport>
+      </Scrollable.Root>
     </div>
   );
 };
diff --git a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts
index fdac834180..05d4c60b18 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts
+++ b/packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts
@@ -5,7 +5,7 @@ export const settingSlideBar = style({
   width: '25%',
   maxWidth: '242px',
   background: cssVar('backgroundSecondaryColor'),
-  padding: '20px 12px',
+  padding: '20px 0px 0px 12px',
   height: '100%',
   flexShrink: 0,
   display: 'flex',
@@ -123,6 +123,7 @@ export const sidebarGroup = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '4px',
+  paddingRight: '12px',
 });
 
 export const accountButton = style({