Fixed spacing in mobile secondary nav

Previously the spacing was spread evenly across the width which lead to
some weird spacing issues, more noticeable between the user avatar & the
dropdown caret

app/assets/stylesheets/framework/header.scss

@@ -261,20 +261,15 @@ header {
     .navbar-nav {
       margin: 0;
-      float: none !important;
-
-      .visible-xs,
-      .visible-sm {
-        display: table-cell !important;
-      }
+      padding-right: 10px;
+      text-align: right;
     }
     .navbar-collapse {
       padding-left: 5px;
       .nav > li {
-        display: table-cell;
-        width: 1%;
+        display: inline-block;
       }
     }
   }

app/views/layouts/header/_default.html.haml

@@ -19,7 +19,7 @@
         %ul.nav.navbar-nav
           %li.hidden-sm.hidden-xs
             = render 'layouts/search' unless current_controller?(:search)
-          %li.visible-sm.visible-xs
+          %li.visible-sm-inline-block.visible-xs-inline-block
             = link_to search_path, title: 'Search', aria: { label: "Search" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
               = icon('search')
           - if current_user