Project security status list is not centred correctly
Summary
The project list from the Security dashboard is not properly expanded if there are more than 3 projects in a grade.
This is happening on Safari < 14, the dashboard looks good on chrome (as mentioned here).
Steps to reproduce
Go to Security dashboard - Project security Status table -> Click on a grade with more than 3 projects -> Project list is improperly expanded
Example Project
https://gitlab.com/groups/gitlab-org/-/security/dashboard
What is the expected correct behavior?
Project list to be expanded inside the table border.
Implementation plan
-
frontend The file in question is https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/security_dashboard/components/first_class_vulnerability_severities.vue. Before this bug was introduced the list would expand to show the first 10 entries and then scroll if there were > 10. We should reintroduce this behaviour.
expected behaviour | current behaviour (Safari < 14) |
---|---|
Tips:
- If you do not have multiple projects, simply modify the HTML in the console and add multiple elements by copy pasting the existing project's markup.
- This happens only on Safari. Clicking on the severity groups breaks the functionality (can't click back to close it).
- I've tested the accordion component (https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-accordion--default) on Safari, and it seems to be working. So probably the problem is related to the file mentioned above (I have seen no console errors on the page).
We use the GlAccordion
component for this, which is a wrapper around the https://bootstrap-vue.org/docs/components/collapse component.
Edited by David Pisek