gui: Improve navigation header layout on mobile

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3240

gui/default/assets/css/overrides.css

@@ -135,12 +135,27 @@ table.table-condensed td.no-overflow-ellipse {
     display: none;
 }
 
+*[language-select] > .dropdown-menu {
+    width: 450px;
+}
+
+*[language-select] > .dropdown-menu > li {
+    float: left;
+    width: 50%;
+}
+
+*[language-select] > .dropdown-menu > li > a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .nav>li{
     float: left;
 }
 .navbar-right {
     /* to align with panel */
     padding-right: 15px;
+    float: right;
 }
 
 .panel-body .table-condensed {
@@ -160,7 +175,7 @@ table.table-condensed td.no-overflow-ellipse {
  */
 
 .panel-icon{
-    float:left;
+    float: left;
     margin-right: 15px;
 }
 
@@ -257,8 +272,29 @@ ul.three-columns li, ul.two-columns li {
         position: relative;
     }
 
-    .nav>li {
-        float:right;
+    .navbar-nav .open .dropdown-menu {
+        position: absolute;
+        left: auto;
+        right: 0;
+        background-color: #ffffff;
+        border: 1px solid #cccccc;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+        border-radius: 2px;
+    }
+
+    *[language-select] {
+        position: static !important;
+    }
+
+    *[language-select] > .dropdown-menu {
+        margin-left: 15px;
+        margin-right: 15px;
+        margin-top: -12px !important;
+        max-width: 450px;
+        height: 265px;
+        overflow-y: scroll;
     }
 
     table.table-condensed td {
@@ -268,47 +304,17 @@ ul.three-columns li, ul.two-columns li {
     }
 }
 
-@media (min-width:650px) {
-    *[language-select] > .dropdown-menu > li {
-        width: 50%;
-        float: left;
-    }
-    *[language-select] > .dropdown-menu {
-        width: 440px;
-    }
-}
-
-/**
- * Menu for select language
- */
-@media (min-width:480px) and (max-width:649px) {
-    *[language-select] > .dropdown-menu {
-        width: 230px;
-    }
-}
-
 @media (max-width:479px) {
-    .dropdown-menu {
-        padding-top: 55px;
-    }
 
     nav .dropdown-toggle {
         font-size: 1em;
     }
 
-    .dropdown-toggle {
-        float: left;
-    }
-
-    .logo{
-        margin:auto;
-    }
-
     .navbar-nav .open .dropdown-menu > li > a {
         padding: 12px 15px 12px 25px;
     }
 
-    .navbar-fixed-bottom li{
-         width:100%;
-     }
+    .navbar-fixed-bottom li {
+         width: 100%;
+    }
 }