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

toeverything · Jan 8, 2025 · a85d620 · a85d620
1 parent fe72741
commit a85d620
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx b/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 => (
-          <WorkspaceItem
-            key={workspace.id}
-            meta={workspace}
-            onSelect={handleSelect}
-          />
-        ))
+        <Scrollable.Root>
+          <Scrollable.Viewport style={{ maxHeight: '40vh' }}>
+            {cloudWorkspaces.map(workspace => (
+              <WorkspaceItem
+                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']()}