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,51 +139,54 @@ const SettingModalInner = ({
         onTabChange={onTabChange}
         selectedWorkspaceId={workspaceMetadata?.id ?? null}
       />
-      <div
-        data-testid="setting-modal-content"
-        className={style.wrapper}
-        ref={modalContentWrapperRef}
-      >
-        <div ref={modalContentRef} className={style.centerContainer}>
-          <div className={style.content}>
-            <Suspense fallback={<WorkspaceDetailSkeleton />}>
-              {activeTab.startsWith('workspace:') && workspaceMetadata ? (
-                <WorkspaceSetting
-                  subTab={activeTab.split(':')[1] as WorkspaceSubTab}
-                  key={workspaceMetadata.id}
-                  workspaceMetadata={workspaceMetadata}
-                />
-              ) : null}
-              {isGeneralSetting(activeTab) ? (
-                <GeneralSetting generalKey={activeTab} />
-              ) : null}
-              {activeTab === 'account' && loginStatus === 'authenticated' ? (
-                <AccountSetting />
-              ) : null}
-            </Suspense>
-          </div>
-          <div className={style.footer}>
-            <ContactWithUsIcon fontSize={16} />
-            <Trans
-              i18nKey={'com.affine.settings.suggestion-2'}
-              components={{
-                1: (
-                  <span
-                    className={style.link}
-                    onClick={handleOpenStarAFFiNEModal}
+      <Scrollable.Root>
+        <Scrollable.Viewport
+          data-testid="setting-modal-content"
+          className={style.wrapper}
+          ref={modalContentWrapperRef}
+        >
+          <div ref={modalContentRef} className={style.centerContainer}>
+            <div className={style.content}>
+              <Suspense fallback={<WorkspaceDetailSkeleton />}>
+                {activeTab.startsWith('workspace:') && workspaceMetadata ? (
+                  <WorkspaceSetting
+                    subTab={activeTab.split(':')[1] as WorkspaceSubTab}
+                    key={workspaceMetadata.id}
+                    workspaceMetadata={workspaceMetadata}
                   />
-                ),
-                2: (
-                  <span
-                    className={style.link}
-                    onClick={handleOpenIssueFeedbackModal}
-                  />
-                ),
-              }}
-            />
+                ) : null}
+                {isGeneralSetting(activeTab) ? (
+                  <GeneralSetting generalKey={activeTab} />
+                ) : null}
+                {activeTab === 'account' && loginStatus === 'authenticated' ? (
+                  <AccountSetting />
+                ) : null}
+              </Suspense>
+            </div>
+            <div className={style.footer}>
+              <ContactWithUsIcon fontSize={16} />
+              <Trans
+                i18nKey={'com.affine.settings.suggestion-2'}
+                components={{
+                  1: (
+                    <span
+                      className={style.link}
+                      onClick={handleOpenStarAFFiNEModal}
+                    />
+                  ),
+                  2: (
+                    <span
+                      className={style.link}
+                      onClick={handleOpenIssueFeedbackModal}
+                    />
+                  ),
+                }}
+              />
+            </div>
           </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%',