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 = 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)