Reduce tablet breakpoint

6 files changed, 19 insertions, 19 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index e5b6486e..e44fd412 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -72,7 +72,7 @@ const App = () => {
   const dispatch = useDispatch();
   const classes = useStyles();
 
-  const desktop = useMediaQuery(theme.breakpoints.up('lg'));
+  const desktop = useMediaQuery(theme.breakpoints.up('md'));
 
   const initialized = useSelector((state) => !!state.session.server && !!state.session.user);
   const [redirectsHandled, setRedirectsHandled] = useState(false);
diff --git a/modern/src/EditCollectionView.js b/modern/src/EditCollectionView.js
index c167a53c..11fe490a 100644
--- a/modern/src/EditCollectionView.js
+++ b/modern/src/EditCollectionView.js
@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
     position: 'fixed',
     bottom: theme.spacing(2),
     right: theme.spacing(2),
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       bottom: dimensions.bottomBarHeight + theme.spacing(2),
     },
   },
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 2798bcf5..c8c9321f 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -46,7 +46,7 @@ const useStyles = makeStyles((theme) => ({
     bottom: theme.dimensions.bottomBarHeight,
     transition: 'transform .5s ease',
     backgroundColor: 'white',
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       width: '100%',
       margin: 0,
     },
@@ -54,7 +54,7 @@ const useStyles = makeStyles((theme) => ({
   sidebarCollapsed: {
     transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`,
     marginLeft: 0,
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       transform: 'translateX(-100vw)',
     },
   },
@@ -71,11 +71,11 @@ const useStyles = makeStyles((theme) => ({
   statusCard: {
     position: 'fixed',
     zIndex: 5,
-    [theme.breakpoints.up('md')]: {
+    [theme.breakpoints.up('sm')]: {
       left: `calc(50% + ${theme.dimensions.drawerWidthDesktop} / 2)`,
       bottom: theme.spacing(3),
     },
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       left: '50%',
       bottom: theme.spacing(3) + theme.dimensions.bottomBarHeight,
     },
@@ -87,7 +87,7 @@ const useStyles = makeStyles((theme) => ({
     top: theme.spacing(3),
     borderRadius: '0px',
     minWidth: 0,
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       left: 0,
     },
   },
@@ -121,7 +121,7 @@ const MainPage = () => {
   const t = useTranslation();
 
   const deviceReadonly = useDeviceReadonly();
-  const isTablet = useMediaQuery(theme.breakpoints.down('md'));
+  const isTablet = useMediaQuery(theme.breakpoints.down('sm'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
   const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index d7c77ee8..51beaeca 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
     top: 0,
     margin: theme.spacing(1.5),
     width: theme.dimensions.drawerWidthDesktop,
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       width: '100%',
       margin: 0,
     },
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme) => ({
   reportFilterContainer: {
     flex: 1,
     padding: theme.spacing(2),
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       margin: theme.spacing(1),
     },
   },
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 8606ed42..98a2bc75 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawer: {
     width: theme.dimensions.drawerWidthDesktop,
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       width: theme.dimensions.drawerWidthTablet,
     },
   },
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   toolbar: {
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       ...theme.mixins.toolbar,
     },
   },
@@ -85,7 +85,7 @@ const ReportLayout = ({ children, filter }) => {
 
   return (
     <div className={classes.root}>
-      <Hidden only={['lg', 'xl']}>
+      <Hidden mdUp>
         <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} />
         <Drawer
           variant="temporary"
@@ -96,7 +96,7 @@ const ReportLayout = ({ children, filter }) => {
           <SideNav routes={routes} />
         </Drawer>
       </Hidden>
-      <Hidden only={['xs', 'sm', 'md']}>
+      <Hidden smDown>
         <Drawer
           variant="permanent"
           classes={{ root: classes.drawerContainer, paper: classes.drawer }}
diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/OptionsLayout.js
index 6aab5e37..ccd2bdb7 100644
--- a/modern/src/settings/OptionsLayout.js
+++ b/modern/src/settings/OptionsLayout.js
@@ -38,14 +38,14 @@ const useStyles = makeStyles((theme) => ({
   },
   drawer: {
     width: theme.dimensions.drawerWidthDesktop,
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       width: theme.dimensions.drawerWidthTablet,
     },
   },
   content: {
     flex: 1,
     padding: theme.spacing(5, 3, 3, 3),
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       paddingTop: theme.spacing(10),
     },
   },
@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(0, 1),
   },
   toolbar: {
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       ...theme.mixins.toolbar,
     },
   },
@@ -111,7 +111,7 @@ const OptionsLayout = ({ children }) => {
 
   return (
     <div className={classes.root}>
-      <Hidden lgUp>
+      <Hidden mdUp>
         <NavBar setOpenDrawer={setOpenDrawer} title={title} />
         <Drawer
           variant="temporary"
@@ -123,7 +123,7 @@ const OptionsLayout = ({ children }) => {
         </Drawer>
       </Hidden>
 
-      <Hidden mdDown>
+      <Hidden smDown>
         <Drawer
           variant="permanent"
           classes={{ root: classes.drawerContainer, paper: classes.drawer }}