Fix mobile layout

Author: kevcenteno

assets/scss/_base.scss

@@ -1,15 +1,24 @@
 @use 'mixins';
 @use 'variables';
 
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
 body {
   background: var(--mm-color-background);
-  display: grid;
   font-family: var(--mm-font-stack-default);
   -webkit-font-smoothing: antialiased;
   line-height: 1.5;
   margin: 0;
   min-height: 100vh;
   padding: 0;
+
+  @media only screen and (min-width: 992px) {
+    display: grid;
+  }
 }
 
 .wrapper {

assets/scss/_header.scss

@@ -36,7 +36,7 @@ $page-header-height: 80px;
   @include mixins.pattern-border;
   background: var(--mm-color-background);
   box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.06);
-  height: calc(var(--page-header-height) - 10px);
+  height: var(--page-header-height);
   padding-top: 10px;
   position: sticky;
   top: 0;

assets/scss/_search.scss

@@ -34,6 +34,10 @@
 .search__button {
   @include mixins.menu-button;
   float: right;
+
+  svg {
+    margin-top: 3px;
+  }
 }
 
 .input {

assets/scss/_sidebar.scss

@@ -27,7 +27,7 @@
 .sidebar-toggle__button span {
   backface-visibility: hidden;
   background-color: #000;
-  height: 1px;
+  height: 2px;
   transition: all .3s ease-out;
   width: 12px;
 
@@ -38,6 +38,7 @@
 }
 
 .sidebar-toggle__button.is-active span {
+  height: 1px;
   opacity: 0;
 
   &:first-child {
@@ -68,11 +69,12 @@
   overflow-y: auto;
   padding-bottom: 20px;
   padding-left: 20px;
+  scrollbar-width: thin;
 
   @media only screen and (min-width: 992px) {
     height: calc(100vh - var(--page-header-height) - 60px);
     position: sticky;
-    top: 130px;
+    top: 115px;
   }
 }
 

assets/scss/_table.scss

@@ -13,13 +13,11 @@
   scrollbar-color: #0003 #0000;
   scrollbar-width: thin;
   width: 100%;
-  z-index: 2;
 
   table {
     border-collapse: collapse;
     font-size: 1rem;
     line-height: 1rem;
-    overflow-x: auto;
     width: 100%;
   }