fix(core): workspace selector on the upgrade to team page overflows (#9586)

<img width="476" alt="截屏2025-01-08 下午4 19 04" src="https://github.com/user-attachments/assets/3a958a4b-3585-4366-9a60-ae73a654b95f" />

packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx

@@ -7,6 +7,7 @@ import {
   MenuTrigger,
   Modal,
   notify,
+  Scrollable,
 } from '@affine/component';
 import { AuthPageContainer } from '@affine/component/auth-components';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
@@ -238,13 +239,18 @@ const WorkspaceSelector = ({
   return (
     <div>
       {cloudWorkspaces.length > 0 ? (
-        cloudWorkspaces.map(workspace => (
+        <Scrollable.Root>
-          <WorkspaceItem
+          <Scrollable.Viewport style={{ maxHeight: '40vh' }}>
-            key={workspace.id}
+            {cloudWorkspaces.map(workspace => (
-            meta={workspace}
+              <WorkspaceItem
-            onSelect={handleSelect}
+                key={workspace.id}
-          />
+                meta={workspace}
-        ))
+                onSelect={handleSelect}
+              />
+            ))}
+          </Scrollable.Viewport>
+          <Scrollable.Scrollbar />
+        </Scrollable.Root>
       ) : (
         <div className={styles.noWorkspaceItem}>
           {t['com.affine.upgrade-to-team-page.no-workspace-available']()}