Merge branch '28187-project-name-cut-off-with-nested-groups' into 'master'

Resolve "Project name cut off with nested groups"

Closes #28187 and #28179

See merge request !10065

1 files changed, 24 insertions, 30 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index fa02598760f..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;
       }
     }
   }