Merge branch '20310-new-project-btn' into 'master'

Fix new project button alignment

## What does this MR do?
Increases the width of the button/search container to fit all items at smaller screen width. The left side of the row can only have a max of two tabs (All Projects, Shared Projects), so everything can still fit on one line until they resize for mobile

## Why was this MR needed?
The `New project` button wrapped to next line at smaller screen width, breaking the layout

## Screenshots (if relevant)
![Screen_Shot_2016-09-09_at_11.44.27_AM](/uploads/a726208deec6623d9fb62db0a549bf38/Screen_Shot_2016-09-09_at_11.44.27_AM.png)
![Screen_Shot_2016-09-09_at_11.46.29_AM](/uploads/bd8dc911757b14c5fafc4d3849e0b242/Screen_Shot_2016-09-09_at_11.46.29_AM.png)

## What are the relevant issue numbers?
Closes #20310

See merge request !6286

app/assets/stylesheets/framework/nav.scss

@@ -99,8 +99,7 @@
 
 .top-area {
   @include clearfix;
-
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid $btn-gray-hover;
 
   .nav-text {
     padding-top: 16px;

app/assets/stylesheets/pages/groups.scss

@@ -55,3 +55,16 @@
     }
   }
 }
+
+.groups-header {
+
+  @media (min-width: $screen-sm-min) {
+    .nav-links {
+      width: 35%;
+    }
+
+    .nav-controls {
+      width: 65%;
+    }
+  }
+}

app/views/groups/show.html.haml

@@ -23,7 +23,7 @@
         .cover-desc.description
           = markdown(@group.description, pipeline: :description)
 
-%div{ class: container_class }
+%div.groups-header{ class: container_class }
   .top-area
     %ul.nav-links
       %li.active