Truncate milestone text on collapse; add tooltip for title

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 {

app/assets/stylesheets/pages/issuable.scss

@@ -449,6 +449,12 @@
         }
       }
     }
+
+    .milestone-title span {
+      @include str-truncated(100%);
+      display: block;
+      margin: 0 4px;
+    }
   }
   a {

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

changelogs/unreleased/35978-milestone-title.yml

+---
+title: Truncate milestone title if sidebar is collapsed
+merge_request:
+author:
+type: fixed