Update MR header and pipeline to use .label-truncate with .label-branch

Also:
- Renamed .label-truncated to .label-truncate
- Removed length checking in JS to let the CSS handle this
- Improve IE11 compatibility of MR headers

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

 <script>
-import tooltip from '~/vue_shared/directives/tooltip';
 import { n__ } from '~/locale';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
 export default {
   name: 'MRWidgetHeader',
-  directives: {
-    tooltip,
-  },
   components: {
     Icon,
     clipboardButton,
+    TooltipOnTruncate,
   },
   props: {
     mr: {
@@ -36,12 +34,6 @@ export default {
         gfm: `\`${this.mr.sourceBranch}\``,
       });
     },
-    isSourceBranchLong() {
-      return this.isBranchTitleLong(this.mr.sourceBranch);
-    },
-    isTargetBranchLong() {
-      return this.isBranchTitleLong(this.mr.targetBranch);
-    },
     webIdePath() {
       return mergeUrlParams({
         target_project: this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath ?
@@ -49,11 +41,6 @@ export default {
       }, webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`));
     },
   },
-  methods: {
-    isBranchTitleLong(branchTitle) {
-      return branchTitle.length > 32;
-    },
-  },
 };
 </script>
 <template>
@@ -65,30 +52,21 @@ export default {
       <div class="normal">
         <strong>
           {{ s__("mrWidget|Request to merge") }}
-          <span
-            :class="{ 'label-truncated': isSourceBranchLong }"
-            :title="isSourceBranchLong ? mr.sourceBranch : ''"
-            :v-tooltip="isSourceBranchLong"
-            class="label-branch js-source-branch"
-            data-placement="bottom"
+          <tooltip-on-truncate
+            :title="mr.sourceBranch"
+            truncate-target="child"
+            class="label-branch label-truncate js-source-branch"
             v-html="mr.sourceBranchLink"
-          >
-          </span>
-
-          <clipboard-button
+          /><clipboard-button
             :text="branchNameClipboardData"
             :title="__('Copy branch name to clipboard')"
             css-class="btn-default btn-transparent btn-clipboard"
           />
-
           {{ s__("mrWidget|into") }}
-
-          <span
-            :v-tooltip="isTargetBranchLong"
-            :class="{ 'label-truncatedtooltip': isTargetBranchLong }"
-            :title="isTargetBranchLong ? mr.targetBranch : ''"
-            class="label-branch"
-            data-placement="bottom"
+          <tooltip-on-truncate
+            :title="mr.targetBranch"
+            truncate-target="child"
+            class="label-branch label-truncate"
           >
             <a
               :href="mr.targetBranchTreePath"
@@ -96,7 +74,7 @@ export default {
             >
               {{ mr.targetBranch }}
             </a>
-          </span>
+          </tooltip-on-truncate>
         </strong>
         <div
           v-if="shouldShowCommitsBehindText"

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -3,6 +3,7 @@
 import PipelineStage from '~/pipelines/components/stage.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
 export default {
   name: 'MRWidgetPipeline',
@@ -10,6 +11,7 @@ export default {
     PipelineStage,
     CiIcon,
     Icon,
+    TooltipOnTruncate,
   },
   props: {
     pipeline: {
@@ -30,6 +32,10 @@ export default {
       type: String,
       required: false,
     },
+    sourceBranch: {
+      type: String,
+      required: false,
+    },
   },
   computed: {
     hasPipeline() {
@@ -107,11 +113,12 @@ export default {
                   >
                     {{ pipeline.commit.short_id }}</a>
                   on
-                  <span
-                    class="label-branch"
+                  <tooltip-on-truncate
+                    :title="sourceBranch"
+                    truncate-target="child"
+                    class="label-branch label-truncate"
                     v-html="sourceBranchLink"
-                  >
-                  </span>
+                  />
                 </template>
               </div>
               <div

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -254,6 +254,7 @@ export default {
       :pipeline="mr.pipeline"
       :ci-status="mr.ciStatus"
       :has-ci="mr.hasCI"
+      :source-branch="mr.sourceBranch"
       :source-branch-link="mr.sourceBranchLink"
     />
     <deployment

app/assets/stylesheets/pages/merge_requests.scss

@@ -195,6 +195,7 @@
     .ci-widget-content {
       display: flex;
       align-items: center;
+      flex: 1;
     }
   }
 
@@ -222,6 +223,7 @@
 
   .normal {
     flex: 1;
+    flex-basis: auto;
   }
 
   .capitalize {
@@ -236,21 +238,19 @@
     overflow: hidden;
     word-break: break-all;
 
-    &.label-truncated {
-      position: relative;
-      display: inline-block;
-      width: 250px;
-      margin-bottom: -3px;
-      white-space: nowrap;
-      text-overflow: clip;
-      line-height: 14px;
-
-      &::after {
-        position: absolute;
-        content: '...';
-        right: 0;
-        font-family: $regular-font;
-        background-color: $gray-light;
+    &.label-truncate {
+      // NOTE: This selector targets its children because some of the HTML comes from
+      // 'source_branch_link'. Once this external HTML is no longer used, we could
+      // simplify this.
+      > a,
+      > span {
+        display: inline-block;
+        max-width: 12.5em;
+        margin-bottom: -3px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 14px;
+        overflow: hidden;
       }
     }
   }
@@ -582,7 +582,7 @@
 
     @include media-breakpoint-down(md) {
       flex-direction: column;
-      align-items: flex-start;
+      align-items: stretch;
 
       .branch-actions {
         margin-top: 16px;
@@ -593,6 +593,7 @@
       .branch-actions {
         align-self: center;
         margin-left: $gl-padding;
+        white-space: nowrap;
       }
     }
   }
@@ -918,7 +919,7 @@
   flex: 1;
   flex-direction: row;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(sm) {
     flex-direction: column;
 
     .stage-cell .stage-container {