From b8a1fbd6c7ed004c380b1cfd70b4c6bf3e13ba62 Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Sat, 11 May 2024 05:44:48 +0000
Subject: [PATCH] fix(core): add margin to scrollbar when clientBorder has no
 style (#6867)

close #6684

https://github.com/toeverything/AFFiNE/assets/102217452/9de18009-c718-4bdd-88fd-caafdb5b419c
---
 .../src/pages/workspace/detail-page/detail-page.css.ts    | 4 ++++
 .../core/src/pages/workspace/detail-page/detail-page.tsx  | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
index 784bc72a03cb2..57be2882e9260 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
@@ -32,3 +32,7 @@ export const affineDocViewport = style({
     },
   },
 });
+
+export const scrollbar = style({
+  marginRight: '4px',
+});
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index 25cca55be0631..dc00ff00c7adc 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@@ -1,6 +1,7 @@
 import { Scrollable } from '@affine/component';
 import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding';
+import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import type { PageRootService } from '@blocksuite/blocks';
 import {
   BookmarkService,
@@ -90,6 +91,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   const rightSidebar = useService(RightSidebarService).rightSidebar;
   const docCollection = workspace.docCollection;
   const mode = useLiveData(doc.mode$);
+  const { appSettings } = useAppSettingHelper();
 
   const isActiveView = useIsActiveView();
   // TODO: remove jotai here
@@ -252,7 +254,11 @@ const DetailPageImpl = memo(function DetailPageImpl() {
                   docCollection={docCollection}
                 />
               </Scrollable.Viewport>
-              <Scrollable.Scrollbar />
+              <Scrollable.Scrollbar
+                className={clsx({
+                  [styles.scrollbar]: !appSettings.clientBorder,
+                })}
+              />
             </Scrollable.Root>
           </AffineErrorBoundary>
           {isInTrash ? <TrashPageFooter /> : null}