Fixed mobile menu and off-canvas scroll issue

Author: itxchandan

astroid/astroid-template-zero/scss/astroid/_mobilemenu.scss

@@ -8,6 +8,8 @@ $burger-layer-width: 30px !default;
    visibility: hidden;
    height: 100%;
    width: 250px;
+   overflow: auto;
+   -webkit-overflow-scrolling: touch;
    background: $white;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
@@ -17,13 +19,15 @@ $burger-layer-width: 30px !default;
          display: block !important;
       }
    }
+   .burger-menu-button {
+      padding: 10px;
+   }
 }
 
 .astroid-mobilemenu-container{
    .astroid-mobilemenu-inner {
       ul{
          padding: 0;
-         overflow: auto;
          height: 100%;
          display: block;
          position: relative;
@@ -94,7 +98,7 @@ $burger-layer-width: 30px !default;
 .burger-menu-button {
    text-align: right;
    line-height: 0;
-   margin: 0 15px;
+   margin: 0;
 }
 
 .astroid-mobilemenu-open{
@@ -117,7 +121,6 @@ $burger-layer-width: 30px !default;
 }
 
 body.astroid-mobilemenu-opened{
-   background: rgb(173, 181, 189);
    max-height: 100vh;
    overflow: hidden;
    .astroid-mobilemenu-open{

astroid/astroid-template-zero/scss/astroid/_offcanvas.scss

@@ -16,7 +16,7 @@ $burger-layer-spacing: 7px !default;
 
 .burger-menu-button {
 	.button {
-		padding: 5px 0;
+		padding: 0;
 		cursor: pointer;
 		transition-property: opacity, filter;
 		transition-duration: 0.15s;
@@ -193,11 +193,17 @@ $burger-layer-spacing: 7px !default;
 	z-index: $zindex-popover;
 	visibility: hidden;
 	height: 100%;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
 	background: $white;
 	-webkit-transition: all 0.5s;
 	transition: all 0.5s;
 	max-width: 100vw !important;
 
+	.burger-menu-button{
+		padding: 10px;
+	}
+
 	.astroid-offcanvas-inner {
 		overflow: auto;
 		position: relative;
@@ -208,7 +214,8 @@ $burger-layer-spacing: 7px !default;
 			margin: 0 -15px;
 		}
 		.moduletable .module-title {
-			padding: 0 15px;
+			padding: 10px 15px;
+			margin: 0;
 		}
 	}
 
@@ -231,6 +238,8 @@ $burger-layer-spacing: 7px !default;
 
 body {
 	&.astroid-offcanvas-opened {
+		max-height: 100vh;
+		overflow: hidden;
 		.astroid-content {
 			&:after {
 				width: 100%;