Fix menu on mobile

2 files changed, 13 insertions, 21 deletions

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 4ef330b2f..c725580d1 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -20,16 +20,12 @@ menu {
   color: $menu-color;
   display: flex;
   flex-direction: column;
+  width: 100%;
 
   &:focus, &:hover {
     overflow-y: auto;
   }
 
-  .top-menu {
-    flex-grow: 1;
-    width: $menu-width;
-  }
-
   .logged-in-block {
     height: 100px;
     background-color: rgba(255, 255, 255, 0.15);
@@ -230,3 +226,14 @@ menu {
     }
   }
 }
+
+@media screen and (max-width: 400px) {
+  .menu-wrapper {
+    width: 100% !important;
+    z-index: 10000;
+  }
+
+  .top-menu {
+    width: 100%;
+  }
+}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index b92036de7..c380fe5bf 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -338,15 +338,6 @@ table {
 }
 
 @media screen and (max-width: 600px) {
-  .menu-wrapper {
-    width: 100% !important;
-    z-index: 10000;
-  }
-
-  menu {
-    width: $menu-width;
-  }
-
   .main-col {
     margin-left: 0;
 
@@ -367,10 +358,4 @@ table {
       }
     }
   }
-}
-
-@media screen and (max-width: 400px) {
-  menu {
-    width: 100%;
-  }
-}
+}
\ No newline at end of file