Toggle project name if too long28187-project-name-cut-off-with-nested-groups

1 files changed, 22 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 5d1aba4e529..6660a022260 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -164,11 +164,25 @@ header {
       }
     }
 
+    .group-name-toggle {
+      margin: 0 5px;
+      vertical-align: sub;
+    }
+
+    .group-title {
+      &.is-hidden {
+        .hidable:not(:last-of-type) {
+          display: none;
+        }
+      }
+    }
+
     .title {
       position: relative;
       padding-right: 20px;
       margin: 0;
       font-size: 18px;
+      max-width: 385px;
       display: inline-block;
       line-height: $header-height;
       font-weight: normal;
@@ -178,6 +192,14 @@ header {
       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;
       }