Merge branch 'header_layout_issue' into 'master'

Fix layout issue in header title truncation.

@douwe Thanks for reviewing this fix for the issue mentioned in https://dev.gitlab.org/gitlab/gitlabhq/issues/2314#note_48539.

**BEFORE**

![before](https://dev.gitlab.org/gitlab/gitlabhq/uploads/4ffb35f77155a92c64cfe36c66987eb0/before.gif)

**AFTER**

![after](https://dev.gitlab.org/gitlab/gitlabhq/uploads/2bb2d0c4a93164f6d47e24cdcb9a106b/after.gif)

See merge request !1867

app/assets/stylesheets/generic/header.scss

@@ -98,16 +98,16 @@ header {
     height: $header-height;
 
     .title {
-      position: relative;
-      float: left;
       margin: 0;
-      margin-left: 35px;
+      padding: 0 15px 0 35px;
+      overflow: hidden;
       font-size: 18px;
       line-height: $header-height;
       font-weight: bold;
       color: #444;
-
-      @include str-truncated(37%);
+      text-overflow: ellipsis;
+      vertical-align: top;
+      white-space: nowrap;
 
       a {
         color: #444;
@@ -116,6 +116,10 @@ header {
         }
       }
     }
+
+    .navbar-collapse {
+      float: right;
+    }
   }
 
   .search {
@@ -167,10 +171,6 @@ header {
 }
 
 @media (max-width: $screen-md-max) {
-  header .container .title {
-    max-width: 43%;
-  }
-
   .header-collapsed, .header-expanded {
     @include collapsed-header;
   }
@@ -190,7 +190,6 @@ header {
     font-size: 18px;
 
     .title {
-      max-width: 70%;
     }
 
     .navbar-nav {

app/assets/stylesheets/generic/mobile.scss

@@ -61,8 +61,7 @@
   }
 
   .container .title {
-    margin-left: 15px !important;
-    max-width: 70% !important;
+    padding-left: 15px !important;
   }
 
   .issue-info, .merge-request-info {

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

@@ -5,9 +5,6 @@
         = brand_header_logo
         %h3 GitLab
     .header-content
-      %h1.title
-        = title
-
       %button.navbar-toggle
         %span.sr-only Toggle navigation
         = icon('bars')
@@ -43,4 +40,6 @@
             = link_to destroy_user_session_path, class: 'logout', method: :delete, title: 'Sign out', data: {toggle: 'tooltip', placement: 'bottom'} do
               = icon('sign-out')
 
+      %h1.title= title
+
 = render 'shared/outdated_browser'

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

@@ -5,10 +5,10 @@
         = brand_header_logo
         %h3 GitLab
     .header-content
-      %h1.title= title
-
       - unless current_controller?('sessions')
         .pull-right
           = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-success btn-sm'
 
+      %h1.title= title
+
 = render 'shared/outdated_browser'