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 |
---|---|
![]() |
![]() |
How to set up and validate locally
Setup
- You'll need an EE License
- You'll need to have runners enabled (See $2408961 for setting up a runner)
- Import https://gitlab.com/gitlab-examples/security/security-reports
- Run a pipeline on master
Validation
- Go to the pipeline's security report tab
- Set the "Tools" filter
- Click on the finding with the title "X-Frame-Options Header Not Set"
- Apply the patch below
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by David Pisek