Merge branch '48431-width' into 'master'

Hide overflow in scoped labels

Closes #48431

See merge request gitlab-org/gitlab-ce!27362

3 files changed, 24 insertions, 1 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index fbd291f095a..f8620eec46d 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -107,6 +107,10 @@
   }
 
   .scoped-label-wrapper {
+    > a {
+      max-width: 100%;
+    }
+
     .color-label {
       padding-right: $gl-padding-24;
     }
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 7084e8715e0..e3d0d0b0fa2 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 {
@@ -444,3 +453,13 @@
     }
   }
 }
+
+// Don't hide the overflow in system messages
+.system-note-message,
+.issuable-detail {
+  .scoped-label-wrapper {
+    .badge {
+      overflow: initial;
+    }
+  }
+}
diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb
index e91e8f85515..a07c3f90a91 100644
--- a/app/helpers/labels_helper.rb
+++ b/app/helpers/labels_helper.rb
@@ -89,7 +89,7 @@ module LabelsHelper
 
   def render_colored_label(label, label_suffix: '', tooltip: true, title: nil)
     text_color = text_color_for_bg(label.color)
-    title ||= tooltip ? label_tooltip_title(label) : ''
+    title ||= tooltip ? label_tooltip_title(label) : label.name
 
     # Intentionally not using content_tag here so that this method can be called
     # by LabelReferenceFilter