Truncate long vulnerability names on security report

app/assets/javascripts/reports/components/modal_open_name.vue

 <script>
+import { GlTooltipDirective, GlResizeObserverDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 
 export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlResizeObserverDirective,
+  },
   props: {
     issue: {
       type: Object,
@@ -13,19 +18,32 @@ export default {
       required: true,
     },
   },
+  data: () => ({
+    tooltipTitle: '',
+  }),
+  mounted() {
+    this.updateTooltipTitle();
+  },
   methods: {
     ...mapActions(['openModal']),
     handleIssueClick() {
       const { issue, status, openModal } = this;
       openModal({ issue, status });
     },
+    updateTooltipTitle() {
+      // Only show the tooltip if the text is truncated with an ellipsis.
+      this.tooltipTitle = this.$el.offsetWidth < this.$el.scrollWidth ? this.issue.title : '';
+    },
   },
 };
 </script>
 <template>
   <button
-    type="button"
-    class="btn-link btn-blank text-left break-link vulnerability-name-button"
+    v-gl-tooltip="{ boundary: 'viewport' }"
+    v-gl-resize-observer-directive="updateTooltipTitle"
+    class="btn-link gl-text-truncate"
+    :aria-label="s__('Reports|Vulnerability Name')"
+    :title="tooltipTitle"
     @click="handleIssueClick()"
   >
     {{ issue.title }}

ee/app/assets/javascripts/vue_shared/security_reports/components/security_issue_body.vue

@@ -34,9 +34,13 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
-    <div class="report-block-list-issue-description-text">
-      <severity-badge v-if="issue.severity" class="d-inline-block" :severity="issue.severity" />
+  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2 gl-w-full">
+    <div class="report-block-list-issue-description-text gl-display-flex gl-w-full">
+      <severity-badge
+        v-if="issue.severity"
+        class="d-inline-block gl-mr-1"
+        :severity="issue.severity"
+      />
       <modal-open-name :issue="issue" :status="status" />
     </div>
     <report-link v-if="showReportLink && issue.path" :issue="issue" />

ee/changelogs/unreleased/38043-truncate-long-vulnerability-names.yml

+---
+title: Truncate long vulnerability names on security report
+merge_request: 38056
+author:
+type: fixed

ee/spec/frontend/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -308,7 +308,7 @@ describe('Grouped security reports app', () => {
       });
 
       it('opens modal with more information', () => {
-        wrapper.vm.$el.querySelector('.break-link').click();
+        wrapper.vm.$el.querySelector('[aria-label="Vulnerability Name"]').click();
 
         return Vue.nextTick().then(() => {
           expect(wrapper.vm.$el.querySelector('.modal-title').textContent.trim()).toEqual(

locale/gitlab.pot

@@ -20245,6 +20245,9 @@ msgstr ""
 msgid "Reports|Vulnerability"
 msgstr ""
 
+msgid "Reports|Vulnerability Name"
+msgstr ""
+
 msgid "Reports|no changed test results"
 msgstr ""