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,141 +171,140 @@ 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>
-        <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={{
-                      height: 'auto',
-                      padding: '8px 12px',
-                    }}
-                    onClick={async () => {
-                      if (!runtimeConfig.enableCloud) {
-                        setOpen(true);
-                      }
-                    }}
-                    data-testid="cloud-signin-button"
-                  >
-                    <StyledCreateWorkspaceCardPillContent>
-                      <StyledCreateWorkspaceCardPillIcon>
-                        <CloudWorkspaceIcon />
-                      </StyledCreateWorkspaceCardPillIcon>
-                      <StyledSignInCardPillTextCotainer>
-                        <StyledSignInCardPillTextPrimary>
-                          {t['com.affine.workspace.cloud.auth']()}
-                        </StyledSignInCardPillTextPrimary>
-                        <StyledSignInCardPillTextSecondary>
-                          Sync with AFFiNE Cloud
-                        </StyledSignInCardPillTextSecondary>
-                      </StyledSignInCardPillTextCotainer>
-                    </StyledCreateWorkspaceCardPillContent>
-                  </MenuItem>
-                </StyledSignInCardPill>
-                <Divider />
-              </StyledModalContent>
-            </>
-          )}
-          <StyledModalHeader>
-            <StyledModalTitle>{t['Local Workspace']()}</StyledModalTitle>
-            <Tooltip
-              content={t['Workspace description']()}
-              placement="top-start"
-              disablePortal={true}
-            >
-              <StyledHelperContainer>
-                <HelpIcon />
-              </StyledHelperContainer>
-            </Tooltip>
-          </StyledModalHeader>
-          <StyledModalContent>
-            <WorkspaceList
-              disabled={disabled}
-              items={
-                workspaces.filter(
-                  ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
-                ) as (AffineCloudWorkspace | LocalWorkspace)[]
+      <StyledModalHeaderContent>
+        <StyledSignInCardPill>
+          <MenuItem
+            style={{
+              height: 'auto',
+              padding: '8px 12px',
+            }}
+            onClick={async () => {
+              if (!runtimeConfig.enableCloud) {
+                setOpen(true);
               }
-              currentWorkspaceId={currentWorkspaceId}
-              onClick={onClickWorkspace}
-              onSettingClick={onClickWorkspaceSetting}
-              onDragEnd={useCallback(
-                (event: DragEndEvent) => {
-                  const { active, over } = event;
-                  if (active.id !== over?.id) {
-                    onMoveWorkspace(active.id as string, over?.id as string);
-                  }
-                },
-                [onMoveWorkspace]
-              )}
-            />
-          </StyledModalContent>
-          <StyledModalContent>
-            {runtimeConfig.enableSQLiteProvider && environment.isDesktop ? (
-              <StyledImportWorkspaceCardPill>
-                <MenuItem
-                  onClick={onAddWorkspace}
-                  data-testid="add-workspace"
-                  style={{
-                    height: 'auto',
-                    padding: '8px 12px',
-                  }}
-                >
-                  <StyledCreateWorkspaceCardPillContent>
-                    <StyledCreateWorkspaceCardPillIcon>
-                      <ImportIcon />
-                    </StyledCreateWorkspaceCardPillIcon>
-                    <div>
-                      <p>{t['com.affine.workspace.local.import']()}</p>
-                    </div>
-                  </StyledCreateWorkspaceCardPillContent>
-                </MenuItem>
-              </StyledImportWorkspaceCardPill>
-            ) : null}
-            <StyledCreateWorkspaceCardPill>
-              <MenuItem
-                style={{
-                  height: 'auto',
-                  padding: '8px 12px',
-                }}
-                onClick={onNewWorkspace}
-                data-testid="new-workspace"
-              >
-                <StyledCreateWorkspaceCardPillContent>
-                  <StyledCreateWorkspaceCardPillIcon>
-                    <PlusIcon />
-                  </StyledCreateWorkspaceCardPillIcon>
-                  <div>
-                    <p>{t['New Workspace']()}</p>
-                  </div>
-                </StyledCreateWorkspaceCardPillContent>
-              </MenuItem>
-            </StyledCreateWorkspaceCardPill>
-          </StyledModalContent>
-        </ScrollableContainer>
+            }}
+            data-testid="cloud-signin-button"
+          >
+            <StyledCreateWorkspaceCardPillContent>
+              <StyledCreateWorkspaceCardPillIcon>
+                <CloudWorkspaceIcon />
+              </StyledCreateWorkspaceCardPillIcon>
+              <StyledSignInCardPillTextCotainer>
+                <StyledSignInCardPillTextPrimary>
+                  {t['com.affine.workspace.cloud.auth']()}
+                </StyledSignInCardPillTextPrimary>
+                <StyledSignInCardPillTextSecondary>
+                  Sync with AFFiNE Cloud
+                </StyledSignInCardPillTextSecondary>
+              </StyledSignInCardPillTextCotainer>
+            </StyledCreateWorkspaceCardPillContent>
+          </MenuItem>
+        </StyledSignInCardPill>
+        <Divider />
+      </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
+            content={t['Workspace description']()}
+            placement="top-start"
+            disablePortal={true}
+          >
+            <StyledHelperContainer>
+              <HelpIcon />
+            </StyledHelperContainer>
+          </Tooltip>
+        </StyledModalHeader>
+        <StyledModalContent>
+          <WorkspaceList
+            disabled={disabled}
+            items={
+              workspaces.filter(
+                ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
+              ) as (AffineCloudWorkspace | LocalWorkspace)[]
+            }
+            currentWorkspaceId={currentWorkspaceId}
+            onClick={onClickWorkspace}
+            onSettingClick={onClickWorkspaceSetting}
+            onDragEnd={useCallback(
+              (event: DragEndEvent) => {
+                const { active, over } = event;
+                if (active.id !== over?.id) {
+                  onMoveWorkspace(active.id as string, over?.id as string);
+                }
+              },
+              [onMoveWorkspace]
+            )}
+          />
+        </StyledModalContent>
+        {runtimeConfig.enableSQLiteProvider && environment.isDesktop ? (
+          <StyledImportWorkspaceCardPill>
+            <MenuItem
+              onClick={onAddWorkspace}
+              data-testid="add-workspace"
+              style={{
+                height: 'auto',
+                padding: '8px 12px',
+              }}
+            >
+              <StyledCreateWorkspaceCardPillContent>
+                <StyledCreateWorkspaceCardPillIcon>
+                  <ImportIcon />
+                </StyledCreateWorkspaceCardPillIcon>
+                <div>
+                  <p>{t['com.affine.workspace.local.import']()}</p>
+                </div>
+              </StyledCreateWorkspaceCardPillContent>
+            </MenuItem>
+          </StyledImportWorkspaceCardPill>
+        ) : null}
       </StyledModalBody>
+      <StyledModalFooterContent>
+        <StyledCreateWorkspaceCardPill>
+          <MenuItem
+            style={{
+              height: 'auto',
+              padding: '8px 12px',
+            }}
+            onClick={onNewWorkspace}
+            data-testid="new-workspace"
+          >
+            <StyledCreateWorkspaceCardPillContent>
+              <StyledCreateWorkspaceCardPillIcon>
+                <PlusIcon />
+              </StyledCreateWorkspaceCardPillIcon>
+              <div>
+                <p>{t['New Workspace']()}</p>
+              </div>
+            </StyledCreateWorkspaceCardPillContent>
+          </MenuItem>
+        </StyledCreateWorkspaceCardPill>
+      </StyledModalFooterContent>
     </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: '12px',
+    padding: '0px 12px',
     display: 'inline-flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
     gap: '12px',
-    background: 'var(--affine-white)',
+    flex: 1,
+    overflowY: 'auto',
   };
 });