Add word-break to generic-sec-report tables

What does this MR do and why?

It fixes an issue that is caused by long, uninterrupted strings data rendering within generic-report tables and results in a broken layout.

See #390084 (closed) for more details.

Screenshots or screen recordings

before after
Screenshot_2023-02-22_at_10.00.44_am Screenshot_2023-02-22_at_10.01.12_am

How to set up and validate locally

Setup

  1. You'll need an EE License
  2. You'll need to have runners enabled (See $2408961 for setting up a runner)
  3. Import https://gitlab.com/gitlab-examples/security/security-reports
  4. Run a pipeline on master

Validation

  1. Go to the pipeline's security report tab
  2. Set the "Tools" filter
  3. Click on the finding with the title "X-Frame-Options Header Not Set"
  4. Apply the patch below
  5. Verify that "Evidence" section does not push beyond the main content area
diff --git a/ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue b/ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue
index cf23b63139a5..714172aa2263 100644
--- a/ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue
+++ b/ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/table.vue
@@ -33,7 +33,10 @@ export default {
       <report-item :item="data.field" />
     </template>
     <template #cell()="data">
-      <report-item :item="data.value" />
+      <span>
+        111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
+        <report-item :item="data.value" />
+      </span>
     </template>
   </gl-table-lite>
 </template>

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by David Pisek

Merge request reports

Loading