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