Fix minor bugs

src/components/AppLayout/AppLayout.tsx

@@ -64,6 +64,12 @@ const useStyles = makeStyles(
       marginLeft: theme.spacing(2),
       transition: theme.transitions.duration.standard + "ms"
     },
+    avatar: {
+      "&&": {
+        height: 32,
+        width: 32
+      }
+    },
     content: {
       [theme.breakpoints.down("sm")]: {
         paddingLeft: 0
@@ -79,9 +85,16 @@ const useStyles = makeStyles(
       paddingLeft: drawerWidth
     },
     darkThemeSwitch: {
+      [theme.breakpoints.down("sm")]: {
+        marginRight: -theme.spacing(1.5)
+      },
       marginRight: theme.spacing(2)
     },
     header: {
+      [theme.breakpoints.down("sm")]: {
+        height: 88,
+        marginBottom: 0
+      },
       display: "flex",
       height: 40,
       marginBottom: theme.spacing(3)
@@ -179,6 +192,9 @@ const useStyles = makeStyles(
       [theme.breakpoints.up("md")]: {
         display: "none"
       },
+      [theme.breakpoints.down("sm")]: {
+        left: 0
+      },
       background: theme.palette.background.paper,
       borderRadius: "50%",
       cursor: "pointer",
@@ -239,12 +255,20 @@ const useStyles = makeStyles(
       flex: 1
     },
     userBar: {
+      [theme.breakpoints.down("sm")]: {
+        alignItems: "flex-end",
+        flexDirection: "column-reverse",
+        overflow: "hidden"
+      },
       alignItems: "center",
       display: "flex"
     },
     userChip: {
       backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.primary
+      borderRadius: 24,
+      color: theme.palette.text.primary,
+      height: 40,
+      padding: theme.spacing(0.5)
     },
     userMenuContainer: {
       position: "relative"
@@ -415,6 +439,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                               <Avatar alt="user" src={user.avatar.url} />
                             )
                           }
+                          classes={{
+                            avatar: classes.avatar
+                          }}
                           className={classes.userChip}
                           label={
                             <>
@@ -433,7 +460,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                           open={isMenuOpened}
                           anchorEl={anchor.current}
                           transition
-                          disablePortal
                           placement="bottom-end"
                         >
                           {({ TransitionProps, placement }) => (

src/components/AppLayout/MenuNested.tsx

@@ -75,6 +75,7 @@ const useStyles = makeStyles(theme => ({
       zIndex: 2
     },
     right: -300,
+    width: drawerWidthExpanded,
     zIndex: -1
   },
   subHeader: {

src/components/ColumnPicker/ColumnPicker.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles(
     popper: {
       boxShadow: `0px 5px 10px 0 ${fade(theme.palette.common.black, 0.05)}`,
       marginTop: theme.spacing(2),
-      zIndex: 1
+      zIndex: 2
     }
   }),
   {

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -43,6 +43,9 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   content: {
+    [theme.breakpoints.down("sm")]: {
+      gridTemplateColumns: "repeat(2, 1fr)"
+    },
     display: "grid",
     gridColumnGap: theme.spacing(3),
     gridTemplateColumns: "repeat(3, 1fr)",

src/components/Container.tsx

@@ -2,19 +2,24 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
-  root: {
+  theme => ({
-    [theme.breakpoints.up("lg")]: {
+    root: {
-      marginLeft: "auto",
+      [theme.breakpoints.up("lg")]: {
-      marginRight: "auto",
+        marginLeft: "auto",
-      maxWidth: theme.breakpoints.width("lg")
+        marginRight: "auto",
-    },
+        maxWidth: theme.breakpoints.width("lg")
-    [theme.breakpoints.up("sm")]: {
+      },
-      padding: theme.spacing(0, 3)
+      [theme.breakpoints.up("sm")]: {
-    },
+        padding: theme.spacing(0, 3)
-    padding: theme.spacing(0, 1)
+      },
+      padding: theme.spacing(0, 1)
+    }
+  }),
+  {
+    name: "Container"
   }
-}));
+);
 
 interface ContainerProps {
   className?: string;

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
   action: {
     flex: "0 0 auto",
     [theme.breakpoints.down("sm")]: {
-      paddingLeft: 10
+      marginTop: theme.spacing()
     }
   },
   grid: {

src/components/PageHeader/PageHeader.tsx

@@ -12,8 +12,8 @@ const useStyles = makeStyles(theme => ({
   title: {
     [theme.breakpoints.down("sm")]: {
       fontSize: 20,
-      paddingBottom: 20,
+      marginTop: theme.spacing(2),
-      paddingLeft: 10
+      padding: 0
     },
     flex: 1,
     fontSize: 24,