Hide overflow in scoped labels

Scoped labels overflew in all the places because of
lack of restriction on `max-width`. This commit introduces
the same limits on width we have inplace for regular labels

1 files changed, 19 insertions, 0 deletions

diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index e7fd7fab32b..d17d20bb683 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -408,12 +408,21 @@
 }
 
 .scoped-label-wrapper {
+  max-width: 100%;
+  vertical-align: top;
+
+  .badge {
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+  }
+
   &.label-link .color-label a {
     color: inherit;
   }
 
   .color-label {
     padding-right: $gl-padding-24;
+    max-width: 100%;
   }
 
   .scoped-label {
@@ -438,3 +447,13 @@
     }
   }
 }
+
+// Don't hide the overflow in system messages
+.system-note-message,
+.issuable-detail {
+  .scoped-label-wrapper {
+    .badge {
+      overflow: initial;
+    }
+  }
+}