Improve toolbar back button

6 files changed, 7 insertions, 7 deletions

diff --git a/modern/src/common/components/NavBar.js b/modern/src/common/components/NavBar.js
index a1a73fdf..a53960fd 100644
--- a/modern/src/common/components/NavBar.js
+++ b/modern/src/common/components/NavBar.js
@@ -10,6 +10,7 @@ const Navbar = ({ setOpenDrawer, title }) => (
       <IconButton
         color="inherit"
         edge="start"
+        sx={{ mr: 2 }}
         onClick={() => setOpenDrawer(true)}
       >
         <MenuIcon />
diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js
index 17567fb1..9d05b703 100644
--- a/modern/src/common/components/PageLayout.js
+++ b/modern/src/common/components/PageLayout.js
@@ -37,7 +37,6 @@ const useStyles = makeStyles((theme) => ({
   content: {
     flexGrow: 1,
     alignItems: 'stretch',
-    overflow: 'auto',
     display: 'flex',
     flexDirection: 'column',
   },
@@ -81,7 +80,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => {
           >
             <div className={classes.toolbar}>
               <Toolbar>
-                <IconButton color="inherit" edge="start" onClick={() => navigate('/')}>
+                <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}>
                   <ArrowBackIcon />
                 </IconButton>
                 <PageTitle breadcrumbs={breadcrumbs} />
@@ -106,7 +105,7 @@ const PageLayout = ({ menu, breadcrumbs, children }) => {
           </Drawer>
           <AppBar position="static" color="inherit">
             <Toolbar>
-              <IconButton color="inherit" edge="start" onClick={() => setOpenDrawer(true)}>
+              <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => setOpenDrawer(true)}>
                 <MenuIcon />
               </IconButton>
               <PageTitle breadcrumbs={breadcrumbs} />
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 6102a005..b3b23aab 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -175,7 +175,7 @@ const MainPage = () => {
         <Paper square elevation={3} className={classes.toolbarContainer}>
           <Toolbar className={classes.toolbar} disableGutters>
             {!desktop && (
-              <IconButton onClick={handleClose}>
+              <IconButton edge="start" sx={{ mr: 2 }} onClick={handleClose}>
                 <ArrowBackIcon />
               </IconButton>
             )}
diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index f4427ca9..cbe4a0fb 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -61,7 +61,7 @@ const EventPage = () => {
     <div className={classes.root}>
       <AppBar color="inherit" position="static">
         <Toolbar>
-          <IconButton color="inherit" edge="start" onClick={() => navigate('/')}>
+          <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}>
             <ArrowBackIcon />
           </IconButton>
           <Typography variant="h6">{t('positionEvent')}</Typography>
diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js
index 61c40902..eb1b90c3 100644
--- a/modern/src/other/PositionPage.js
+++ b/modern/src/other/PositionPage.js
@@ -74,7 +74,7 @@ const PositionPage = () => {
     <div className={classes.root}>
       <AppBar position="sticky" color="inherit">
         <Toolbar>
-          <IconButton color="inherit" edge="start" onClick={() => navigate(-1)}>
+          <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate(-1)}>
             <ArrowBackIcon />
           </IconButton>
           <Typography variant="h6">
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index 9331777e..fcf01fc7 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -152,7 +152,7 @@ const ReplayPage = () => {
       <div className={classes.sidebar}>
         <Paper elevation={3} square>
           <Toolbar>
-            <IconButton onClick={() => navigate(-1)}>
+            <IconButton edge="start" sx={{ mr: 2 }} onClick={() => navigate(-1)}>
               <ArrowBackIcon />
             </IconButton>
             <Typography variant="h6" className={classes.title}>{t('reportReplay')}</Typography>