layout

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>Dashfront</title>
     <style>
       html,
@@ -12,6 +12,12 @@
         min-height: 100%;
         background-color: #dceeea;
       }
+
+      html,
+      body {
+        overscroll-behavior-y: none;
+        touch-action: manipulation;
+      }
     </style>
   </head>
   <body>

src/components/PageLayout.jsx

@@ -38,10 +38,11 @@ export default function PageLayout({ title, subNav, basePath, children }) {
                   sx={(theme) => ({
                     width: 80,
                     height: 80,
+                    borderRadius: '50%',
                     color: theme.palette.text.secondary,
                     bgcolor: 'transparent',
                     '&:hover': {
-                      bgcolor: 'transparent',
+                      bgcolor: theme.palette.action.hover,
                       color: theme.palette.primary.main,
                     },
                     '&.active': {

src/index.css

@@ -4,3 +4,9 @@ body,
   min-height: 100%;
   background-color: #dceeea;
 }
+
+html,
+body {
+  overscroll-behavior-y: none;
+  touch-action: manipulation;
+}