From 8e4a5b25f5d3dc61e7ac2defed30b57b875f5a74 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Mon, 4 Nov 2019 20:31:23 +0100
Subject: [PATCH] Fix page header on mobile

---
 src/components/AppHeader/AppHeader.tsx                | 11 +++++++++--
 .../ExtendedPageHeader/ExtendedPageHeader.tsx         | 10 ++++++++--
 src/components/PageHeader/PageHeader.tsx              |  5 +++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx
index 07f2e815e..f7e941fba 100644
--- a/src/components/AppHeader/AppHeader.tsx
+++ b/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;
 
diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
index 70d1c6a1a..5972b3619 100644
--- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx
+++ b/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",
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index a78c57737..3800a254e 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/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)