Fix responsive layout

src/jsMain/resources/style/style.scss

@@ -48,6 +48,7 @@ a {
   &:hover {
     text-decoration: none;
   }
+
   &:active {
     color: $primary-color;
   }
@@ -64,12 +65,6 @@ a {
   box-sizing: border-box;
 }
 
-@media (min-width: 576px) {
-  .container {
-    width: 540px;
-  }
-}
-
 @media (min-width: 768px) {
   .container {
     width: 720px;
@@ -106,6 +101,7 @@ a {
     font-size: 1.1rem;
     position: relative;
     text-transform: uppercase;
+    white-space: nowrap;
 
     &::after {
       content: '';
@@ -145,6 +141,63 @@ a {
 
 .menu-right {
   float: right;
+
+  .menu-icon {
+    display: block;
+    cursor: default;
+
+    padding: 0 1rem;
+    color: $text-primary-color;
+    height: 100%;
+    font-size: 2rem;
+    position: relative;
+  }
+
+  .menu-content {
+    display: none;
+    position: absolute;
+    background-color: $background-secondary-color;
+    z-index: 1;
+    left: 1rem;
+    right: 1rem;
+
+    a {
+      display: block;
+      line-height: 3rem;
+      &:after {
+        bottom: 0.2rem;
+      }
+    }
+  }
+
+  &:hover {
+    .menu-content {
+      display: block;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .menu-right {
+    .menu-icon {
+      display: none;
+    }
+
+    .menu-content {
+      display: block;
+      position: static;
+      background-color: transparent;
+      z-index: unset;
+
+      a {
+        display: inline-block;
+        line-height: unset;
+        &:after {
+          bottom: 1.8em
+        }
+      }
+    }
+  }
 }
 
 .main {
@@ -155,12 +208,16 @@ a {
   float: left;
   padding-bottom: 0.5rem !important;
 
+  input {
+    padding-right: 4rem;
+  }
+
   .btn-search {
     position: absolute;
     top: 0;
     height: calc(2.5rem + 2px);
     line-height: 2.5rem;
-    right: -3rem;
+    right: -3px;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
 
@@ -347,6 +404,7 @@ a {
   color: $primary-text-color;
   border-color: $primary-color;
 }
+
 .btn-danger {
   background-color: $error-color;
   color: $error-text-color;
@@ -359,5 +417,11 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 
 form {
   margin-bottom: 2rem;
-  width: 20rem;
-}
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  form {
+    width: 24rem;
+  }
+}