Fix layout

src/components/AppLayout/AppLayout.tsx

@@ -48,15 +48,19 @@ const styles = (theme: Theme) =>
       },
       bottom: 0,
       gridColumn: 2,
-      left: 210,
-      position: "fixed",
-      width: "calc(100% - 210px)",
+      height: 70,
+      position: "sticky",
       zIndex: 10
     },
     appLoader: {
       height: appLoaderHeight,
+      marginBottom: theme.spacing.unit * 2,
       zIndex: 1201
     },
+    appLoaderPlaceholder: {
+      height: appLoaderHeight,
+      marginBottom: theme.spacing.unit * 2
+    },
     arrow: {
       marginLeft: theme.spacing.unit * 2,
       transition: theme.transitions.duration.standard + "ms"
@@ -81,11 +85,7 @@ const styles = (theme: Theme) =>
     header: {
       display: "flex",
       height: 40,
-      marginBottom: theme.spacing.unit * 3,
-      marginTop: theme.spacing.unit * 2
-    },
-    hide: {
-      opacity: 0
+      marginBottom: theme.spacing.unit * 3
     },
     isMenuSmall: {
       "& path": {
@@ -258,7 +258,15 @@ const styles = (theme: Theme) =>
       flex: 1,
       flexGrow: 1,
       marginLeft: 0,
-      paddingBottom: theme.spacing.unit * 10
+      paddingBottom: theme.spacing.unit,
+      [theme.breakpoints.up("sm")]: {
+        paddingBottom: theme.spacing.unit * 3
+      }
+    },
+    viewContainer: {
+      minHeight: `calc(100vh - ${theme.spacing.unit * 2 +
+        appLoaderHeight +
+        70}px)`
     }
   });
 
@@ -319,12 +327,6 @@ const AppLayout = withStyles(styles, {
           {({ isProgress }) => (
             <AppHeaderContext.Provider value={appHeaderAnchor}>
               <AppActionContext.Provider value={appActionAnchor}>
-                <LinearProgress
-                  className={classNames(classes.appLoader, {
-                    [classes.hide]: !isProgress
-                  })}
-                  color="primary"
-                />
                 <div className={classes.root}>
                   <div className={classes.sideBar}>
                     <ResponsiveDrawer
@@ -373,6 +375,15 @@ const AppLayout = withStyles(styles, {
                       [classes.contentToggle]: isMenuSmall
                     })}
                   >
+                    {isProgress ? (
+                      <LinearProgress
+                        className={classes.appLoader}
+                        color="primary"
+                      />
+                    ) : (
+                      <div className={classes.appLoaderPlaceholder} />
+                    )}
+                    <div className={classes.viewContainer}>
                       <div>
                         <Container>
                           <div className={classes.header}>
@@ -403,7 +414,10 @@ const AppLayout = withStyles(styles, {
                                 <Chip
                                   avatar={
                                     user.avatar && (
-                                    <Avatar alt="user" src={user.avatar.url} />
+                                      <Avatar
+                                        alt="user"
+                                        src={user.avatar.url}
+                                      />
                                     )
                                   }
                                   className={classes.userChip}
@@ -439,7 +453,9 @@ const AppLayout = withStyles(styles, {
                                     >
                                       <Paper>
                                         <ClickAwayListener
-                                        onClickAway={() => setMenuState(false)}
+                                          onClickAway={() =>
+                                            setMenuState(false)
+                                          }
                                           mouseEvent="onClick"
                                         >
                                           <Menu>
@@ -473,6 +489,7 @@ const AppLayout = withStyles(styles, {
                         </Container>
                       </div>
                       <main className={classes.view}>{children}</main>
+                    </div>
                     <div className={classes.appAction} ref={appActionAnchor} />
                   </div>
                 </div>