fix width scroll issue (except review page)

ShMcK · ShMcK · commit 9aa6a1b544a3 · 2020-07-24T17:16:42.000-07:00
Signed-off-by: shmck &lt;shawn.j.mckay@gmail.com&gt;
diff --git a/src/commands.ts b/src/commands.ts
@@ -28,7 +28,6 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP
   return {
     // initialize
     [COMMANDS.START]: async () => {
-      console.log('start')
       if (webview && webview.state.loaded) {
         webview.createOrShow()
       } else {
diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
@@ -1,5 +1,5 @@
 import { configure } from '@storybook/react'
-import '../src/styles/index.css'
+import '../src/styles/reset.css'
 
 // setup acquireVsCodeApi mock
 // @ts-ignore
diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx
@@ -10,13 +10,13 @@ import Routes from './Routes'
 const App = () => (
   /* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
   <ConfigProvider locale={enUS}>
-    <ErrorBoundary>
-      <Workspace>
+    <Workspace>
+      <ErrorBoundary>
         <ThemeProvider theme={theme}>
           <Routes />
         </ThemeProvider>
-      </Workspace>
-    </ErrorBoundary>
+      </ErrorBoundary>
+    </Workspace>
   </ConfigProvider>
 )
 
diff --git a/web-app/src/components/Error/index.tsx b/web-app/src/components/Error/index.tsx
@@ -14,7 +14,8 @@ const styles = {
     alignItems: 'center' as 'center',
     border: `0.5rem solid ${theme['$color-error-2']}`,
     padding: '1rem',
-    width: '100vw',
+    width: '100%',
+    maxWidth: '100%',
     height: '100%',
   }),
   content: (theme: Theme) => ({
diff --git a/web-app/src/components/Workspace/index.tsx b/web-app/src/components/Workspace/index.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
-import { useWindowResize } from './resize'
 import { Theme } from '../../styles/theme'
 
 interface Props {
@@ -13,13 +12,14 @@ const styles = {
     position: 'relative' as 'relative',
     margin: 0,
     width: '100vw',
+    maxWidth: '100%',
     backgroundColor: theme['$color-white'],
+    overflow: 'auto',
   }),
 }
 
 const Workspace = ({ children }: Props) => {
-  const dimensions = useWindowResize()
-  return <div css={{ ...styles.page, ...dimensions }}>{children}</div>
+  return <div css={styles.page}>{children}</div>
 }
 
 export default Workspace
diff --git a/web-app/src/components/Workspace/resize.ts b/web-app/src/components/Workspace/resize.ts
diff --git a/web-app/src/containers/Loading/LoadingPage.tsx b/web-app/src/containers/Loading/LoadingPage.tsx
@@ -15,7 +15,7 @@ const styles = {
     flexDirection: 'column' as 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '100vw',
+    width: '100%',
   },
 }
 
diff --git a/web-app/src/containers/Loading/index.tsx b/web-app/src/containers/Loading/index.tsx
@@ -17,7 +17,7 @@ const styles = {
     alignItems: 'center' as 'center',
     justifyContent: 'center' as 'center',
     height: '100%',
-    width: '100vw',
+    width: '100%',
   },
   processes: {
     padding: '0 1rem',
diff --git a/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx b/web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx
@@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile'
 const styles = {
   formWrapper: {
     padding: '1rem',
-    width: '100vw',
+    width: '100%',
     height: 'auto',
   },
 }
diff --git a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx
@@ -10,7 +10,7 @@ const styles = {
     position: 'relative' as 'relative',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
-    width: '100vw',
+    width: '100%',
   },
   nav: (theme: Theme) => ({
     height: theme['$nav-height'],
diff --git a/web-app/src/containers/SelectTutorial/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx
@@ -9,7 +9,7 @@ const styles = {
   page: {
     position: 'relative' as 'relative',
     height: 'auto',
-    width: '100vw',
+    width: '100%',
   },
   selectPage: {
     padding: '1rem',
diff --git a/web-app/src/containers/Start/index.tsx b/web-app/src/containers/Start/index.tsx
@@ -4,15 +4,18 @@ import * as TT from 'typings/tutorial'
 import BetaBadge from '../../components/BetaBadge'
 import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
+import { Theme } from '../../styles/theme'
 
 const styles = {
-  page: {
+  page: (theme: Theme) => ({
     position: 'relative' as 'relative',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
-    width: '100vw',
+    width: '100%',
+    maxWidth: '100%',
     height: '100vh',
-  },
+    backgroundColor: theme['$color-white'],
+  }),
   header: {
     flex: 1,
     display: 'flex' as 'flex',
diff --git a/web-app/src/containers/Tutorial/components/CompletedBanner.tsx b/web-app/src/containers/Tutorial/components/CompletedBanner.tsx
@@ -6,14 +6,14 @@ import { Theme } from '../../../styles/theme'
 const styles = {
   banner: (theme: Theme) => ({
     height: 'auto',
-    width: '100vw',
+    width: '100%',
     backgroundColor: theme['$color-brand1-9'],
     color: theme['$color-white'],
     padding: '0.5rem 1rem',
   }),
   header: {
     position: 'relative' as 'relative',
-    width: '100vw',
+    width: '100%',
   },
   headerMessage: {
     marginLeft: '0.5rem',
diff --git a/web-app/src/containers/Tutorial/components/Content.tsx b/web-app/src/containers/Tutorial/components/Content.tsx
@@ -5,6 +5,7 @@ const styles = {
   text: {
     padding: '0rem 1rem',
     paddingBottom: '1rem',
+    width: '100%',
   },
   title: {
     fontSize: '1.2rem',
diff --git a/web-app/src/containers/Tutorial/components/Level.tsx b/web-app/src/containers/Tutorial/components/Level.tsx
@@ -10,7 +10,7 @@ const styles = {
     backgroundColor: theme['$color-white'],
     position: 'relative' as 'relative',
     height: 'auto',
-    width: '100vw',
+    width: '100%',
   }),
   content: {
     display: 'flex' as 'flex',
diff --git a/web-app/src/containers/Tutorial/containers/About.tsx b/web-app/src/containers/Tutorial/containers/About.tsx
@@ -3,10 +3,12 @@ import Markdown from '../../../components/Markdown'
 import { Theme } from '../../../styles/theme'
 
 const styles = {
-  container: {
+  container: (theme: Theme) => ({
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
-  },
+    backgroundColor: theme['$color-white'],
+    height: 'auto',
+  }),
   header: (theme: Theme) => ({
     display: 'flex' as 'flex',
     alignItems: 'center',
diff --git a/web-app/src/containers/Tutorial/containers/Review.tsx b/web-app/src/containers/Tutorial/containers/Review.tsx
@@ -10,11 +10,13 @@ interface Props {
 }
 
 const styles = {
-  container: {
-    height: 'auto',
+  container: (theme: Theme) => ({
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
-  },
+    height: 'auto',
+    backgroundColor: theme['$color-white'],
+    paddingBottom: '2rem',
+  }),
   header: (theme: Theme) => ({
     display: 'flex' as 'flex',
     alignItems: 'center',
@@ -33,13 +35,11 @@ const styles = {
     alignItems: 'center',
     fontSize: '70%',
   },
-  levels: {
-    paddingBottom: '2rem',
-  },
+  levels: {},
 }
 
 const ReviewPage = (props: Props) => {
-  const [stepVisibility, setStepVisibility] = React.useState(false)
+  const [stepVisibility, setStepVisibility] = React.useState(true)
   return (
     <div css={styles.container}>
       <div css={styles.header}>
@@ -49,16 +49,14 @@ const ReviewPage = (props: Props) => {
           <Switch checked={stepVisibility} onChange={(checked) => setStepVisibility(checked)} />
         </div>
       </div>
+
       <div css={styles.levels}>
         {props.levels.map((level: T.LevelUI, index: number) => (
-          <div key={level.id}>
-            <div>
-              <Content title={level.title} content={level.content} />
-              {stepVisibility ? <Steps steps={level.steps} displayAll /> : null}
-            </div>
-            {/* divider */}
+          <>
+            <Content title={level.title} content={level.content} />
+            {stepVisibility ? <Steps steps={level.steps} displayAll /> : null}
             {index < props.levels.length - 1 ? <hr /> : null}
-          </div>
+          </>
         ))}
       </div>
     </div>
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
@@ -21,7 +21,9 @@ import { useTheme } from 'emotion-theming'
 
 const styles = {
   page: {
-    width: '100vw',
+    width: '100%',
+    maxWidth: '100%',
+    height: 'auto',
     paddingBottom: '5rem',
   },
   header: (theme: Theme) => ({
diff --git a/web-app/src/index.tsx b/web-app/src/index.tsx
@@ -7,7 +7,7 @@ import './mock'
 import App from './App'
 
 // init initial styles
-import './styles/index.css'
+import './styles/reset.css'
 // init listeners
 import './services/listeners'
 
diff --git a/web-app/src/styles/reset.css b/web-app/src/styles/reset.css

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const styles = {`
`15`	`15`	`flexDirection: 'column' as 'column',`
`16`	`16`	`alignItems: 'center',`
`17`	`17`	`justifyContent: 'center',`
`18`		`- width: '100vw',`
	`18`	`+ width: '100%',`
`19`	`19`	`},`
`20`	`20`	`}`
`21`	`21`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile'`
`8`	`8`	`const styles = {`
`9`	`9`	`formWrapper: {`
`10`	`10`	`padding: '1rem',`
`11`		`- width: '100vw',`
	`11`	`+ width: '100%',`
`12`	`12`	`height: 'auto',`
`13`	`13`	`},`
`14`	`14`	`}`