Merge branch '35978-milestone-title' into 'master'

Truncate milestone text on collapse; add tooltip for title

Closes #35978

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

4 files changed, 15 insertions, 3 deletions

diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 04579058688..4675b1fcb8f 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -45,7 +45,7 @@ import _ from 'underscore';
         if (issueUpdateURL) {
           milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
           milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
-          collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- remaining %>" data-placement="left"> <%- title %> </span>');
+          collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- name %><br /><%- remaining %>" data-placement="left" data-html="true"> <%- title %> </span>');
         }
         return $dropdown.glDropdown({
           showMenuAbove: showMenuAbove,
@@ -208,6 +208,7 @@ import _ from 'underscore';
                 if (data.milestone != null) {
                   data.milestone.full_path = _this.currentProject.full_path;
                   data.milestone.remaining = gl.utils.timeFor(data.milestone.due_date);
+                  data.milestone.name = data.milestone.title;
                   $value.html(milestoneLinkTemplate(data.milestone));
                   return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
                 } else {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index d8a15faf7e9..d01ee4b033c 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -449,6 +449,12 @@
         }
       }
     }
+
+    .milestone-title span {
+      @include str-truncated(100%);
+      display: block;
+      margin: 0 4px;
+    }
   }
 
   a {
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 0afa48b392c..9cae3f51825 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -24,9 +24,9 @@
       .block.milestone
         .sidebar-collapsed-icon
           = icon('clock-o', 'aria-hidden': 'true')
-          %span
+          %span.milestone-title
             - if issuable.milestone
-              %span.has-tooltip{ title: milestone_remaining_days(issuable.milestone), data: { container: 'body', html: 1, placement: 'left' } }
+              %span.has-tooltip{ title: "#{issuable.milestone.title}<br>#{milestone_remaining_days(issuable.milestone)}", data: { container: 'body', html: 1, placement: 'left' } }
                 = issuable.milestone.title
             - else
               None
diff --git a/changelogs/unreleased/35978-milestone-title.yml b/changelogs/unreleased/35978-milestone-title.yml
new file mode 100644
index 00000000000..1a4b71328c1
--- /dev/null
+++ b/changelogs/unreleased/35978-milestone-title.yml
@@ -0,0 +1,5 @@
+---
+title: Truncate milestone title if sidebar is collapsed
+merge_request:
+author:
+type: fixed