style: add scrollbar (#2826)

apps/web/src/components/pure/footer/styles.ts

@@ -48,8 +48,7 @@ export const StyleWorkspaceTitle = styled('div')(() => {
 });
 
 export const StyledFooter = styled('div')({
-  height: '84px',
-  padding: '0 40px',
+  padding: '20px 40px',
   flexShrink: 0,
   ...displayFlex('space-between', 'center'),
 });

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

@@ -6,6 +6,7 @@ import {
   ModalWrapper,
   Tooltip,
 } from '@affine/component';
+import { ScrollableContainer } from '@affine/component';
 import { WorkspaceList } from '@affine/component/workspace-list';
 import type {
   AffineLegacyCloudWorkspace,
@@ -105,7 +106,7 @@ export const WorkspaceListModal = ({
             />
           </StyledOperationWrapper>
         </StyledModalHeader>
-
+        <ScrollableContainer>
         <StyledModalContent>
           <WorkspaceList
             disabled={disabled}
@@ -128,6 +129,7 @@ export const WorkspaceListModal = ({
             )}
           />
           {!environment.isDesktop && (
+            <div>
             <StyledCreateWorkspaceCard
               onClick={onNewWorkspace}
               data-testid="new-workspace"
@@ -143,6 +145,7 @@ export const WorkspaceListModal = ({
                 <p>{t['Create Or Import']()}</p>
               </StyleWorkspaceInfo>
             </StyledCreateWorkspaceCard>
+            </div>
           )}
 
           {environment.isDesktop && (
@@ -218,7 +221,7 @@ export const WorkspaceListModal = ({
             </Menu>
           )}
         </StyledModalContent>
-
+        </ScrollableContainer>
         <Footer user={user} onLogin={onClickLogin} onLogout={onClickLogout} />
       </ModalWrapper>
     </Modal>

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

@@ -45,6 +45,7 @@ export const StyledCreateWorkspaceCard = styled('div')(() => {
   return {
     width: '310px',
     height: '124px',
+    marginBottom: '24px',
     cursor: 'pointer',
     padding: '16px',
     boxShadow: 'var(--affine-shadow-1)',
@@ -133,10 +134,8 @@ export const StyledHelperContainer = styled('div')(() => {
 });
 
 export const StyledModalContent = styled('div')({
-  height: '534px',
+  height: '540px',
   padding: '8px 40px',
-  marginTop: '72px',
-  overflow: 'auto',
   ...displayFlex('space-between', 'flex-start', 'flex-start'),
   flexWrap: 'wrap',
 });
@@ -163,12 +162,11 @@ export const StyleWorkspaceAdd = styled('div')(() => {
 export const StyledModalHeader = styled('div')(() => {
   return {
     width: '100%',
-    height: '72px',
-    position: 'absolute',
+    marginTop: '10px',
     left: 0,
     top: 0,
     borderRadius: '24px 24px 0 0',
-    padding: '0 40px',
+    padding: '10px 40px',
     ...displayFlex('space-between', 'center'),
   };
 });