From 96425660863dbf3624f1a19b8b91a0a352f37cc7 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Mon, 18 Nov 2024 08:47:12 +0000
Subject: [PATCH] fix(core): make right-sidebar scrollable (#8830)

---
 .../workspace/detail-page/detail-page.css.ts  |  4 +++
 .../workspace/detail-page/detail-page.tsx     | 28 ++++++++++++++++---
 .../view/sidebar/sidebar-container.css.ts     |  3 +-
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts
index d6d8985c1..a2519bb12 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.css.ts
@@ -44,3 +44,7 @@ export const affineDocViewport = style({
 export const scrollbar = style({
   marginRight: '4px',
 });
+
+export const sidebarScrollArea = style({
+  height: '100%',
+});
diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx
index 95dd078f4..040b8462f 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page.tsx
@@ -302,19 +302,39 @@ const DetailPageImpl = memo(function DetailPageImpl() {
       )}
 
       <ViewSidebarTab tabId="properties" icon={<PropertyIcon />}>
-        <DocPropertySidebar />
+        <Scrollable.Root className={styles.sidebarScrollArea}>
+          <Scrollable.Viewport>
+            <DocPropertySidebar />
+          </Scrollable.Viewport>
+          <Scrollable.Scrollbar />
+        </Scrollable.Root>
       </ViewSidebarTab>
 
       <ViewSidebarTab tabId="journal" icon={<TodayIcon />}>
-        <EditorJournalPanel />
+        <Scrollable.Root className={styles.sidebarScrollArea}>
+          <Scrollable.Viewport>
+            <EditorJournalPanel />
+          </Scrollable.Viewport>
+          <Scrollable.Scrollbar />
+        </Scrollable.Root>
       </ViewSidebarTab>
 
       <ViewSidebarTab tabId="outline" icon={<TocIcon />}>
-        <EditorOutlinePanel editor={editorContainer} />
+        <Scrollable.Root className={styles.sidebarScrollArea}>
+          <Scrollable.Viewport>
+            <EditorOutlinePanel editor={editorContainer} />
+          </Scrollable.Viewport>
+          <Scrollable.Scrollbar />
+        </Scrollable.Root>
       </ViewSidebarTab>
 
       <ViewSidebarTab tabId="frame" icon={<FrameIcon />}>
-        <EditorFramePanel editor={editorContainer} />
+        <Scrollable.Root className={styles.sidebarScrollArea}>
+          <Scrollable.Viewport>
+            <EditorFramePanel editor={editorContainer} />
+          </Scrollable.Viewport>
+          <Scrollable.Scrollbar />
+        </Scrollable.Root>
       </ViewSidebarTab>
 
       <GlobalPageHistoryModal />
diff --git a/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.css.ts b/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.css.ts
index 07767c641..da605f992 100644
--- a/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.css.ts
+++ b/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.css.ts
@@ -24,10 +24,9 @@ export const sidebarContainerInner = style({
 export const sidebarBodyTarget = style({
   display: 'flex',
   flexDirection: 'column',
+  height: 0,
   flex: 1,
   width: '100%',
-  height: '100%',
-  overflow: 'hidden',
   alignItems: 'center',
 });