fix: workspace dropdown fix (#3808)

apps/core/src/components/pure/workspace-list-modal/index.tsx

@@ -1,5 +1,4 @@
 import { Menu, MenuItem, Tooltip } from '@affine/component';
-import { ScrollableContainer } from '@affine/component';
 import { WorkspaceList } from '@affine/component/workspace-list';
 import type {
   AffineCloudWorkspace,
@@ -32,7 +31,9 @@ import {
   StyledImportWorkspaceCardPill,
   StyledModalBody,
   StyledModalContent,
+  StyledModalFooterContent,
   StyledModalHeader,
+  StyledModalHeaderContent,
   StyledModalHeaderLeft,
   StyledModalTitle,
   StyledOperationWrapper,
@@ -170,31 +171,18 @@ export const WorkspaceListModal = ({
         zIndex: 999,
         '& .MuiPopover-paper': {
           borderRadius: '8px',
-          boxShadow: 'var(--affine-shadow-1)',
+          display: 'flex',
+          flexDirection: 'column',
+          boxShadow: 'var(--affine-shadow-2)',
+          backgroundColor: 'var(--affine-background-overlay-panel-color)',
         },
+        maxHeight: '90vh',
       }}
       open={open}
       anchorEl={anchorEl}
       onClose={onClose}
     >
-      <StyledModalBody>
+      <StyledModalHeaderContent>
-        <ScrollableContainer>
-          {isLoggedIn ? (
-            <CloudWorkSpaceList
-              disabled={disabled}
-              open={open}
-              onClose={onClose}
-              workspaces={workspaces}
-              onClickWorkspace={onClickWorkspace}
-              onClickWorkspaceSetting={onClickWorkspaceSetting}
-              onNewWorkspace={onNewWorkspace}
-              onAddWorkspace={onAddWorkspace}
-              currentWorkspaceId={currentWorkspaceId}
-              onMoveWorkspace={onMoveWorkspace}
-            />
-          ) : (
-            <>
-              <StyledModalContent>
         <StyledSignInCardPill>
           <MenuItem
             style={{
@@ -224,9 +212,22 @@ export const WorkspaceListModal = ({
           </MenuItem>
         </StyledSignInCardPill>
         <Divider />
-              </StyledModalContent>
+      </StyledModalHeaderContent>
-            </>
+      <StyledModalBody>
-          )}
+        {isLoggedIn ? (
+          <CloudWorkSpaceList
+            disabled={disabled}
+            open={open}
+            onClose={onClose}
+            workspaces={workspaces}
+            onClickWorkspace={onClickWorkspace}
+            onClickWorkspaceSetting={onClickWorkspaceSetting}
+            onNewWorkspace={onNewWorkspace}
+            onAddWorkspace={onAddWorkspace}
+            currentWorkspaceId={currentWorkspaceId}
+            onMoveWorkspace={onMoveWorkspace}
+          />
+        ) : null}
         <StyledModalHeader>
           <StyledModalTitle>{t['Local Workspace']()}</StyledModalTitle>
           <Tooltip
@@ -261,7 +262,6 @@ export const WorkspaceListModal = ({
             )}
           />
         </StyledModalContent>
-          <StyledModalContent>
         {runtimeConfig.enableSQLiteProvider && environment.isDesktop ? (
           <StyledImportWorkspaceCardPill>
             <MenuItem
@@ -283,6 +283,8 @@ export const WorkspaceListModal = ({
             </MenuItem>
           </StyledImportWorkspaceCardPill>
         ) : null}
+      </StyledModalBody>
+      <StyledModalFooterContent>
         <StyledCreateWorkspaceCardPill>
           <MenuItem
             style={{
@@ -302,9 +304,7 @@ export const WorkspaceListModal = ({
             </StyledCreateWorkspaceCardPillContent>
           </MenuItem>
         </StyledCreateWorkspaceCardPill>
-          </StyledModalContent>
+      </StyledModalFooterContent>
-        </ScrollableContainer>
-      </StyledModalBody>
     </Popover>
   );
 };

apps/core/src/components/pure/workspace-list-modal/styles.ts

@@ -86,7 +86,6 @@ export const StyledCreateWorkspaceCardPill = styled('div')(() => {
     display: 'flex',
     width: '100%',
     height: '58px',
-    background: 'var(--affine-background-primary-color)',
     border: `1px solid var(--affine-border-color)`,
   };
 });
@@ -97,8 +96,6 @@ export const StyledSignInCardPill = styled('div')(() => {
     display: 'flex',
     width: '100%',
     height: '58px',
-    marginBottom: '6px',
-    background: 'var(--affine-background-primary-color)',
   };
 });
 
@@ -107,7 +104,6 @@ export const StyledImportWorkspaceCardPill = styled('div')(() => {
     borderRadius: '5px',
     display: 'flex',
     width: '100%',
-    marginBottom: '12px',
   };
 });
 
@@ -176,7 +172,27 @@ export const StyledModalContent = styled('div')({
   ...displayFlex('space-between', 'flex-start', 'flex-start'),
   flexWrap: 'wrap',
   flexDirection: 'column',
+  width: '100%',
 });
+
+export const StyledModalFooterContent = styled('div')({
+  ...displayFlex('space-between', 'flex-start', 'flex-start'),
+  flexWrap: 'wrap',
+  flexDirection: 'column',
+  width: '100%',
+  padding: '12px',
+  backgroundColor: 'var(--affine-background-overlay-panel-color)',
+});
+
+export const StyledModalHeaderContent = styled('div')({
+  ...displayFlex('space-between', 'flex-start', 'flex-start'),
+  flexWrap: 'wrap',
+  flexDirection: 'column',
+  width: '100%',
+  padding: '12px 12px 0px 12px',
+  backgroundColor: 'var(--affine-background-overlay-panel-color)',
+});
+
 export const StyledOperationWrapper = styled('div')(() => {
   return {
     ...displayFlex('flex-end', 'center'),
@@ -188,13 +204,13 @@ export const StyleWorkspaceAdd = styled('div')(() => {
     width: '58px',
     height: '58px',
     borderRadius: '100%',
-    background: 'var(--affine-white-80)',
+    background: 'var(--affine-background-overlay-panel-color)',
     border: '1.5px dashed #f4f5fa',
     transition: 'background .2s',
     fontSize: '24px',
     ...displayFlex('center', 'center'),
     borderColor: 'var(--affine-white)',
-    color: 'var(--affine-primary-color)',
+    color: 'var(--affine-background-overlay-panel-color)',
   };
 });
 export const StyledModalHeader = styled('div')(() => {
@@ -210,12 +226,12 @@ export const StyledModalHeader = styled('div')(() => {
 
 export const StyledModalBody = styled('div')(() => {
   return {
-    borderRadius: '8px',
+    padding: '0px 12px',
-    padding: '12px',
     display: 'inline-flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
     gap: '12px',
-    background: 'var(--affine-white)',
+    flex: 1,
+    overflowY: 'auto',
   };
 });

packages/component/src/components/card/workspace-card/index.tsx

@@ -2,11 +2,6 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import { SettingsIcon } from '@blocksuite/icons';
-import {
-  CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
-  CollaborationIcon as DefaultJoinedWorkspaceIcon,
-  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
-} from '@blocksuite/icons';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 import { useCallback } from 'react';
@@ -19,21 +14,6 @@ import {
   StyledWorkspaceTitle,
 } from './styles';
 
-const JoinedWorkspaceIcon = () => {
-  return <DefaultJoinedWorkspaceIcon style={{ color: '#FF646B' }} />;
-};
-const LocalWorkspaceIcon = () => {
-  return <DefaultLocalWorkspaceIcon style={{ color: '#FDBD32' }} />;
-};
-
-const CloudWorkspaceIcon = () => {
-  return <DefaultCloudWorkspaceIcon style={{ color: '#60A5FA' }} />;
-};
-
-// const LocalDataIcon = () => {
-//   return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
-// };
-
 export interface WorkspaceTypeProps {
   flavour: WorkspaceFlavour;
 }
@@ -46,7 +26,6 @@ const WorkspaceType = ({ flavour }: WorkspaceTypeProps) => {
   if (flavour === WorkspaceFlavour.LOCAL) {
     return (
       <p style={{ fontSize: '10px' }} title={t['Local Workspace']()}>
-        <LocalWorkspaceIcon />
         <span>{t['Local Workspace']()}</span>
       </p>
     );
@@ -54,12 +33,10 @@ const WorkspaceType = ({ flavour }: WorkspaceTypeProps) => {
 
   return isOwner ? (
     <p style={{ fontSize: '10px' }} title={t['Cloud Workspace']()}>
-      <CloudWorkspaceIcon />
       <span>{t['Cloud Workspace']()}</span>
     </p>
   ) : (
     <p style={{ fontSize: '10px' }} title={t['Joined Workspace']()}>
-      <JoinedWorkspaceIcon />
       <span>{t['Joined Workspace']()}</span>
     </p>
   );

packages/component/src/ui/tooltip/tooltip.tsx

@@ -8,7 +8,7 @@ import StyledPopperContainer from '../shared/container';
 const StyledTooltip = styled(StyledPopperContainer)(() => {
   return {
     display: 'inline-flex',
-    height: '38px',
+    minHeight: '38px',
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',