Fix various issues

3 files changed, 8 insertions, 1 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index 5455058a..7a4af349 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -58,9 +58,10 @@ const useStyles = makeStyles(() => ({
   },
   page: {
     flexGrow: 1,
+    overflow: 'auto',
   },
   menu: {
-    zIndex: 1,
+    zIndex: 4,
   },
 }));
 
diff --git a/modern/src/EditCollectionView.js b/modern/src/EditCollectionView.js
index 5d1d4e74..59a91c60 100644
--- a/modern/src/EditCollectionView.js
+++ b/modern/src/EditCollectionView.js
@@ -9,12 +9,16 @@ import { useSelector } from 'react-redux';
 
 import RemoveDialog from './RemoveDialog';
 import { useTranslation } from './LocalizationProvider';
+import dimensions from './theme/dimensions';
 
 const useStyles = makeStyles((theme) => ({
   fab: {
     position: 'fixed',
     bottom: theme.spacing(2),
     right: theme.spacing(2),
+    [theme.breakpoints.down('md')]: {
+      bottom: dimensions.bottomBarHeight + theme.spacing(2),
+    },
   },
 }));
 
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 75af9666..247001aa 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -36,6 +36,7 @@ const useStyles = makeStyles((theme) => ({
     position: 'absolute',
     left: 0,
     top: 0,
+    zIndex: 3,
     margin: theme.spacing(1.5),
     width: theme.dimensions.drawerWidthDesktop,
     bottom: theme.dimensions.bottomBarHeight,
@@ -102,6 +103,7 @@ const useStyles = makeStyles((theme) => ({
     position: 'fixed',
     left: theme.spacing(1.5),
     bottom: theme.spacing(1.5),
+    zIndex: 4,
     width: theme.dimensions.drawerWidthDesktop,
   },
 }));