fix: some responsiveness issues (#1088)

apps/web/public/globals.css

@@ -154,6 +154,7 @@ legend {
 }
 body {
   background: #fff;
+  overflow: hidden;
 }
 a,
 a:hover {

apps/web/src/components/editor/index.tsx

@@ -7,7 +7,7 @@ import { styled } from '@affine/component';
 const StyledEditorContainer = styled('div')(() => {
   return {
     position: 'relative',
-    height: 'calc(100vh - 60px)',
+    height: 'calc(100% - 60px)',
     padding: '0 32px',
   };
 });

apps/web/src/components/workspace-layout/styles.ts

@@ -3,6 +3,7 @@ import { styled } from '@affine/component';
 export const StyledPage = styled('div')(({ theme }) => {
   return {
     height: '100vh',
+    minHeight: '450px',
     backgroundColor: theme.colors.pageBackground,
     transition: 'background-color .5s',
     display: 'flex',
@@ -14,6 +15,7 @@ export const StyledWrapper = styled('div')(() => {
   return {
     flexGrow: 1,
     position: 'relative',
+    overflow: 'auto',
   };
 });
 

apps/web/src/pages/temporary.css

@@ -4,7 +4,7 @@
 }
 
 .affine-default-page-block-container {
-  width: 686px !important;
+  max-width: 686px;
 }
 .affine-default-page-block-container > .affine-block-children-container {
   margin-left: -26px !important;