improve mobile ui

src/components/Navigation/styles.module.scss

@@ -65,15 +65,7 @@
 
 .mainMenuItem {
     display: inline-block;
-    margin: 0;
-    padding: 7px 6px 6px;
-    border: 1px solid $color-black;
-    border-width: 1px 1px 0;
-    border-radius: 10px 10px 0 0;
-    text-align: center;
-    background-color: $color-grey-light;
-    cursor: pointer;
-    color: $color-grey-dark;
+    margin: 0 6px;
 
     @include mobile {
         display: block;
@@ -89,6 +81,22 @@
         background-color: $color-black;
     }
 
+    @include desktop {
+        margin: 0;
+        padding: 7px 6px 6px;
+        border-radius: 10px 10px 0 0;
+        text-align: center;
+        cursor: pointer;
+        color: $color-grey-dark;
+        border: solid $color-black;
+        border-width: 1px 1px 0;
+        background-color: $color-grey-light;
+
+        &:not(.active) a:hover {
+            color: $color-white;
+        }
+    }
+
     a {
         font-size: 0.9em;
         font-weight: bold;
@@ -100,8 +108,4 @@
             padding: 10px 15px;
         }
     }
-
-    &:not(.active) a:hover {
-        color: $color-white;
-    }
 }

src/theme/mixins.scss

@@ -1,13 +1,13 @@
 @import "./variables";
 
 @mixin desktop {
-    @media (min-width: 800px) {
+    @media (min-width: 900px) {
         @content;
     }
 }
 
 @mixin mobile {
-    @media (max-width: 799px) {
+    @media (max-width: 899px) {
         @content;
     }
 }
@@ -23,8 +23,8 @@
 }
 
 @mixin page-content-wrapper($desktopWidth: 720px) {
-    margin: 10px 0;
-    padding: 10px;
+    margin: 10px 4px;
+    padding: 6px;
     background-color: $color-white;
     border-radius: 15px;
     border: $border-large;