Fix page header on mobile

src/components/AppHeader/AppHeader.tsx

@@ -30,7 +30,10 @@ const useStyles = makeStyles(theme => ({
     cursor: "pointer",
     display: "flex",
     marginTop: theme.spacing(0.5),
-    transition: theme.transitions.duration.standard + "ms"
+    transition: theme.transitions.duration.standard + "ms",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
   },
   skeleton: {
     marginBottom: theme.spacing(2),
@@ -40,9 +43,13 @@ const useStyles = makeStyles(theme => ({
     color: "inherit",
     flex: 1,
     marginLeft: theme.spacing(),
-    textTransform: "uppercase"
+    textTransform: "uppercase",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
   }
 }));
+
 const AppHeader: React.FC<AppHeaderProps> = props => {
   const { children, onBack } = props;
 

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -4,7 +4,10 @@ import React from "react";
 
 const useStyles = makeStyles(theme => ({
   action: {
-    flex: "0 0 auto"
+    flex: "0 0 auto",
+    [theme.breakpoints.down("sm")]: {
+      paddingLeft: 10
+    }
   },
   grid: {
     padding: theme.spacing(2)
@@ -18,7 +21,10 @@ const useStyles = makeStyles(theme => ({
   root: {
     alignItems: "center",
     display: "flex",
-    marginBottom: theme.spacing(3)
+    marginBottom: theme.spacing(3),
+    [theme.breakpoints.down("sm")]: {
+      display: "block"
+    }
   },
   subtitle: {
     alignItems: "center",

src/components/PageHeader/PageHeader.tsx

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