feat(core): replace setting content scroll with radix ScrollArea (#6787)

Use global scroll-area style

![CleanShot 2024-05-07 at 10.58.01@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/5330b59d-fea0-4b2b-a046-1740c8099a19.png)

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/layout.css.ts

@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { keyframes, style } from '@vanilla-extract/css';
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
 export const plansLayoutRoot = style({
   display: 'flex',
   flexDirection: 'column',
@@ -100,7 +100,6 @@ export const aiScrollTip = style({
   justifyContent: 'space-between',
   padding: '12px 20px 12px 16px',
   boxShadow: cssVar('shadow1'),
-  display: 'flex',
   marginBottom: -100,
 
   animation: `${slideInBottom} 0.3s ease 0.5s forwards`,
@@ -112,6 +111,10 @@ export const aiScrollTip = style({
     },
   },
 });
+// to override `display: contents !important` in `scrollable.tsx`
+globalStyle(`div.${aiScrollTip}`, {
+  display: 'flex !important',
+});
 export const aiScrollTipLabel = style({
   display: 'flex',
   alignItems: 'center',

packages/frontend/core/src/components/affine/setting-modal/index.tsx

@@ -1,4 +1,4 @@
-import { Loading } from '@affine/component';
+import { Loading, Scrollable } from '@affine/component';
 import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
 import type { ModalProps } from '@affine/component/ui/modal';
 import { Modal } from '@affine/component/ui/modal';
@@ -139,7 +139,8 @@ const SettingModalInner = ({
         onTabChange={onTabChange}
         selectedWorkspaceId={workspaceMetadata?.id ?? null}
       />
-      <div
+      <Scrollable.Root>
+        <Scrollable.Viewport
           data-testid="setting-modal-content"
           className={style.wrapper}
           ref={modalContentWrapperRef}
@@ -183,7 +184,9 @@ const SettingModalInner = ({
               />
             </div>
           </div>
-      </div>
+          <Scrollable.Scrollbar />
+        </Scrollable.Viewport>
+      </Scrollable.Root>
     </>
   );
 };

packages/frontend/core/src/components/affine/setting-modal/style.css.ts

@@ -5,13 +5,8 @@ export const wrapper = style({
   height: '100%',
   // margin: '0 auto',
   padding: '40px 15px 20px 15px',
-  overflowX: 'hidden',
-  overflowY: 'auto',
   display: 'flex',
   justifyContent: 'center',
-  '::-webkit-scrollbar': {
-    display: 'none',
-  },
 });
 export const centerContainer = style({
   width: '100%',