Broken Layout for GraphQL vulnerability list for pipeline security tab when location names are too long
Summary
When rendering a list of vulnerabilities which contains at least one finding with a long location-string the layout breaks.
NOTE: This is currently hidden behind the :pipeline_security_dashboard_graphql feature flag, which is not yet enabled by default.
Steps to reproduce
Run a pipeline that includes a vulnerability finding with a long location name.
Example Project
This is currently behind a feature flag and I will link to a project with an example once the change lock has been lifted (it also does not allow to toggle feature flags).
What is the current bug behavior?
The vulnerability listing table's layout is breaking.
What is the expected correct behavior?
The listing should render just like the vulnerability report page.
Relevant logs and/or screenshots
Output of checks
Results of GitLab environment info
Expand for output related to GitLab environment info
(For installations with omnibus-gitlab package run and paste the output of: `sudo gitlab-rake gitlab:env:info`) (For installations from source run and paste the output of: `sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)
Results of GitLab application Check
Expand for output related to the GitLab application check
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)(we will only investigate if the tests are passing)
Possible fixes
The pipeline bundle is missing styles from ee/app/assets/stylesheets/page_bundles/security_dashboard.scss, which adds widths, etc. to control the vulnerability-list's layout.
My suggestion is to pull those styles into a separate partial and then import it from both ee/app/assets/stylesheets/page_bundles/security_dashboard.scss and ee/app/assets/stylesheets/page_bundles/pipeline.scss.