Including a large "table" element under "details" in the security report overflows
Summary
Using generic details
field in security report causes a table which spills past the report element and into whitespace on the parent div.
Steps to reproduce
Run a dast job outputting details
like this snippet.
Example element for brevity:
{
"interaction": {
"header": [
{ "type": "text", "value": "Full ID" },
{ "type": "text", "value": "Protocol" },
{ "type": "text", "value": "Remote Address" },
{ "type": "text", "value": "Timestamp" },
{ "type": "text", "value": "Unique ID" }
],
"name": "Interactsh Interaction Details",
"rows": [
[
{ "type": "text","value": "cfch5u6cj6n7q0i6es2guo9w3pq4tta6n" },
{ "type": "text","value": "http" },
{ "type": "text","value": "34.74.216.97" },
{ "type": "text","value": "2023-01-31T13:09:15.06907621Z" },
{ "type": "text","value": "cfch5u6cj6n7q0i6es2guo9w3pq4tta6n" }
]
],
"type": "table"
}
}
Example Project
- https://gitlab.com/erran/gitlab-org-gitlab-issue-390084
- https://gitlab.com/erran/gitlab-org-gitlab-issue-390084/-/security/vulnerabilities/74240919
What is the current bug behavior?
The table element overflows past the rest of the security report div.
What is the expected correct behavior?
The rest of the report content (e.g. request evidence) expands or the table is truncated/horizontal scroll is used.
Relevant logs and/or screenshots
Output of checks
Possible fixes
Seems like the CSS applied to the component being pulled in here is probably at fault: https://gitlab.com/gitlab-org/gitlab/-/blob/ee759af316b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue#L258
Edited by Erran Carey