Set default sort for tags to Last updated

Fix spacing between nav control elements
Wrap navigation text on Tags list page

1 files changed, 44 insertions, 31 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 4f84bc37f90..a87e4f2f299 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -116,8 +116,8 @@
     padding-top: 16px;
     padding-bottom: 11px;
     display: inline-block;
-    width: 50%;
     line-height: 28px;
+    white-space: normal;
 
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-xs-max) {
@@ -158,7 +158,6 @@
   }
 
   .nav-controls {
-    width: 50%;
     display: inline-block;
     float: right;
     text-align: right;
@@ -167,7 +166,9 @@
 
     > .btn,
     > .btn-container,
-    > .dropdown {
+    > .dropdown,
+    > input,
+    > form {
       margin-right: $gl-padding-top;
       display: inline-block;
       vertical-align: top;
@@ -182,19 +183,21 @@
       float: none;
     }
 
-    > form {
-      display: inline-block;
-    }
-
     .icon-label {
       display: none;
     }
 
-    input {
+    .btn,
+    .dropdown,
+    .dropdown-toggle,
+    input,
+    form {
       height: 35px;
+    }
+
+    input {
       display: inline-block;
       position: relative;
-      margin-right: $gl-padding-top;
 
       /* Medium devices (desktops, 992px and up) */
       @media (min-width: $screen-md-min) { width: 200px; }
@@ -218,6 +221,7 @@
       .btn,
       form,
       .dropdown,
+      .dropdown-toggle,
       .dropdown-menu-toggle,
       .form-control {
         margin: 0 0 10px;
@@ -268,6 +272,10 @@
       padding: 17px 0;
     }
   }
+
+  pre {
+    width: 100%;
+  }
 }
 
 .layout-nav {
@@ -423,33 +431,38 @@
 }
 
 @media (max-width: $screen-xs-max) {
-  .top-area .nav-controls {
-    $controls-margin: $btn-xs-side-margin - 2px;
+  .top-area {
+    flex-flow: row wrap;
 
-    &.controls-flex {
-      display: flex;
-      flex-flow: row wrap;
-      align-items: center;
-      justify-content: center;
-      padding: 0 0 $gl-padding-top;
-    }
+    .nav-controls {
+      $controls-margin: $btn-xs-side-margin - 2px;
+      flex: 0 0 100%;
+
+      &.controls-flex {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0 $gl-padding-top;
+      }
 
-    .controls-item,
-    .controls-item:last-child {
-      flex: 1 1 35%;
-      display: block;
-      width: 100%;
-      margin: $controls-margin;
+      .controls-item,
+      .controls-item-full,
+      .controls-item:last-child {
+        flex: 1 1 35%;
+        display: block;
+        width: 100%;
+        margin: $controls-margin;
 
-      .btn,
-      .dropdown {
-        margin: 0;
+        .btn,
+        .dropdown {
+          margin: 0;
+        }
       }
-    }
 
-    .controls-item-full {
-      @extend .controls-item;
-      flex: 1 1 100%;
+      .controls-item-full {
+        flex: 1 1 100%;
+      }
     }
   }
 }