Merge remote-tracking branch 'upstream/master' into test-pg-mysql

* upstream/master: (127 commits)
  Fixed up issue boards JS specs
  Implement new service for creating user
  Add Changelog entry for pipeline retry fix
  Do not retry jobs multiple times when retrying a pipeline
  Update sentry-raven 2.0.2 -> 2.4.0
  Update webmock 1.21.0 -> 1.24.6
  Update spring 1.7.2 -> 2.0.1
  Update simplecov 0.12.0 -> 0.14.1
  Update pry-rails 0.3.4 -> 0.3.5
  Update pry-byebug 3.4.1 -> 3.4.2
  Update flay 2.6.1 -> 2.8.1
  Optimize labels finder query
  Remove Tags filter from Projects Explore dropdown
  Update capybara-screenshot 1.0.11 -> 1.0.14
  Update bullet 5.2.0 -> 5.5.1
  Update brakeman 3.4.1 -> 3.6.1
  Remove web-console gem
  Update better_errors 1.0.1 -> 2.1.1
  Display flash message to unauthenticated user when creating new issue
  Activate group name toggle based on horizontal space
  ...

1 files changed, 25 insertions, 31 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 6660a022260..6f356369476 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -26,7 +26,7 @@ header {
     padding: 0 16px;
     z-index: 100;
     margin-bottom: 0;
-    height: $header-height;
+    min-height: $header-height;
     background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
@@ -85,7 +85,7 @@ header {
 
       .navbar-toggle {
         color: $nav-toggle-gray;
-        margin: 6px 0;
+        margin: 7px 0;
         border-radius: 0;
         position: absolute;
         right: -10px;
@@ -135,12 +135,14 @@ header {
   }
 
   .header-content {
+    display: flex;
+    justify-content: space-between;
     position: relative;
-    height: $header-height;
+    min-height: $header-height;
     padding-left: 30px;
 
-    @media (min-width: $screen-sm-min) {
-      padding-right: 0;
+    @media (max-width: $screen-sm-max) {
+      padding-right: 20px;
     }
 
     .dropdown-menu {
@@ -165,8 +167,7 @@ header {
     }
 
     .group-name-toggle {
-      margin: 0 5px;
-      vertical-align: sub;
+      margin: 3px 5px;
     }
 
     .group-title {
@@ -177,39 +178,32 @@ header {
       }
     }
 
+    .title-container {
+      display: flex;
+      align-items: flex-start;
+      flex: 1 1 auto;
+      padding-top: (($header-height - 19) / 2);
+      overflow: hidden;
+    }
+
     .title {
       position: relative;
       padding-right: 20px;
       margin: 0;
       font-size: 18px;
-      max-width: 385px;
+      line-height: 22px;
       display: inline-block;
-      line-height: $header-height;
       font-weight: normal;
       color: $gl-text-color;
-      overflow: hidden;
-      text-overflow: ellipsis;
       vertical-align: top;
       white-space: nowrap;
 
-      &.initializing {
-        display: none;
-      }
-
-      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-        max-width: 300px;
-      }
-
-      @media (max-width: $screen-xs-max) {
-        max-width: 190px;
-      }
-
-      @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
-        max-width: 428px;
+      &.wrap {
+        white-space: normal;
       }
 
-      @media (min-width: $screen-lg-min) {
-        max-width: 685px;
+      &.initializing {
+        opacity: 0;
       }
 
       a {
@@ -226,10 +220,10 @@ header {
         border: transparent;
         background: transparent;
         position: absolute;
+        top: 2px;
         right: 3px;
         width: 12px;
         line-height: 19px;
-        margin-top: (($header-height - 19) / 2);
         padding: 0;
         font-size: 10px;
         text-align: center;
@@ -247,7 +241,7 @@ header {
     }
 
     .navbar-collapse {
-      float: right;
+      flex: 0 0 auto;
       border-top: none;
 
       @media (min-width: $screen-md-min) {
@@ -255,7 +249,7 @@ header {
       }
 
       @media (max-width: $screen-xs-max) {
-        float: none;
+        flex: 1 1 auto;
       }
     }
   }
@@ -265,7 +259,7 @@ header {
   }
 
   .impersonation i {
-    color: $red-normal;
+    color: $red-500;
   }
 }