Feature/width styles

web-app/src/components/Card/index.tsx

@@ -1,14 +1,26 @@
 import * as React from 'react'
 import { Card as AlifdCard } from '@alifd/next'
 
+const styles = {
+  card: {
+    display: 'flex',
+    width: '100%',
+  },
+}
+
 interface Props {
   children: React.ReactNode
   onClick?: () => void
   style?: React.CSSProperties
 }
 
 const Card = (props: Props) => (
-  <AlifdCard showTitleBullet={false} contentHeight="auto" onClick={props.onClick} style={props.style}>
+  <AlifdCard
+    showTitleBullet={false}
+    contentHeight="auto"
+    onClick={props.onClick}
+    style={{ ...styles.card, ...props.style }}
+  >
     {props.children}
   </AlifdCard>
 )

web-app/src/components/Workspace/index.tsx

@@ -5,8 +5,8 @@ interface Props {
 }
 
 const resize = () => ({
-  width: window.innerWidth - 20,
-  height: window.innerHeight - 20,
+  minWidth: window.innerWidth - 20,
+  minHeight: window.innerHeight - 20,
 })
 
 const Workspace = ({ children }: Props) => {
@@ -19,7 +19,7 @@ const Workspace = ({ children }: Props) => {
 
   const styles = {
     page: {
-			display: 'flex' as 'flex',
+      display: 'flex' as 'flex',
       margin: 0,
       backgroundColor: 'white',
     },

web-app/src/containers/Continue/index.tsx

@@ -4,14 +4,20 @@ import Card from '../../components/Card'
 import * as CR from 'typings'
 import * as G from 'typings/graphql'
 
+const styles = {
+  page: {
+    width: '100%',
+  },
+}
+
 interface Props {
   tutorial: G.Tutorial
   onContinue(): void
   onNew(): void
 }
 
 export const ContinuePage = (props: Props) => (
-  <div>
+  <div style={styles.page}>
     <h3>Continue</h3>
     <Card>
       <div>

web-app/src/containers/LoadingPage.tsx

@@ -10,8 +10,7 @@ const styles = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: window.innerWidth - 20,
-    height: window.innerHeight - 20,
+    width: '100%',
   },
 }
 

web-app/src/containers/New/NewPage.tsx

@@ -3,6 +3,9 @@ import * as G from 'typings/graphql'
 import TutorialList from './TutorialList'
 
 const styles = {
+  page: {
+    width: '100%',
+  },
   header: {
     height: '36px',
     backgroundColor: '#EBEBEB',
@@ -22,7 +25,7 @@ interface Props {
 }
 
 const NewPage = (props: Props) => (
-  <div>
+  <div style={styles.page}>
     <div style={styles.header}>
       <span>CodeRoad</span>
     </div>

web-app/src/containers/Overview/OverviewPage.tsx

@@ -5,6 +5,9 @@ import * as G from 'typings/graphql'
 import Markdown from '../../components/Markdown'
 
 const styles = {
+  page: {
+    width: '100%',
+  },
   summary: {
     padding: '0rem 1rem 1rem 1rem',
   },
@@ -47,7 +50,7 @@ interface Props {
 }
 
 const Summary = ({ title, description, levels, onNext }: Props) => (
-  <div>
+  <div style={styles.page}>
     <div style={styles.header}>
       <span>CodeRoad</span>
     </div>

web-app/src/containers/Tutorial/LevelPage/Level/index.tsx

@@ -9,6 +9,7 @@ import Markdown from '../../../../components/Markdown'
 const styles = {
   card: {
     padding: 0,
+    width: '100%',
   },
   header: {
     height: '36px',

web-app/stories/utils/SideBarDecorator.tsx

@@ -4,9 +4,8 @@ const styles = {
   container: {
     position: 'relative' as 'relative',
     boxSizing: 'border-box' as 'border-box',
-    maxWidth: '20rem',
     borderRight: '2px solid black',
-    width: '20rem',
+    width: '100%',
     height: window.innerHeight,
   },
 }