Improve layouts

3 files changed, 8 insertions, 12 deletions

diff --git a/modern/src/components/NavBar.js b/modern/src/components/NavBar.js
index 83dcd6e0..ac689e76 100644
--- a/modern/src/components/NavBar.js
+++ b/modern/src/components/NavBar.js
@@ -5,7 +5,7 @@ import {
 import MenuIcon from '@material-ui/icons/Menu';
 
 const Navbar = ({ setOpenDrawer, title }) => (
-  <AppBar position="fixed" color="inherit">
+  <AppBar position="sticky" color="inherit">
     <Toolbar>
       <IconButton color="inherit" edge="start" onClick={() => setOpenDrawer(true)}>
         <MenuIcon />
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 98a2bc75..bacebddf 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -18,6 +18,9 @@ import { useTranslation } from '../LocalizationProvider';
 const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+    },
     height: '100%',
   },
   drawerContainer: {
@@ -31,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
   },
   content: {
     flex: 1,
-    padding: theme.spacing(5, 3, 3, 3),
+    padding: theme.spacing(3, 3, 3, 3),
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
@@ -44,11 +47,6 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: 'transparent',
     },
   },
-  toolbar: {
-    [theme.breakpoints.down('sm')]: {
-      ...theme.mixins.toolbar,
-    },
-  },
 }));
 
 const ReportLayout = ({ children, filter }) => {
@@ -114,7 +112,6 @@ const ReportLayout = ({ children, filter }) => {
         </Drawer>
       </Hidden>
       <div className={classes.content}>
-        <div className={classes.toolbar} />
         <Grid container direction="column" spacing={2}>
           <Grid item>{filter}</Grid>
           <Grid item>{children}</Grid>
diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/OptionsLayout.js
index ccd2bdb7..c70ef7fe 100644
--- a/modern/src/settings/OptionsLayout.js
+++ b/modern/src/settings/OptionsLayout.js
@@ -31,6 +31,9 @@ import { useAdministrator, useReadonly } from '../common/permissions';
 const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+    },
     height: '100%',
   },
   drawerContainer: {
@@ -44,10 +47,6 @@ const useStyles = makeStyles((theme) => ({
   },
   content: {
     flex: 1,
-    padding: theme.spacing(5, 3, 3, 3),
-    [theme.breakpoints.down('sm')]: {
-      paddingTop: theme.spacing(10),
-    },
   },
   drawerHeader: {
     ...theme.mixins.toolbar,