Improve vulnerability list sticky header approach
Problem
Each time we make a modification to the container above the list (which contains the grouping, normal filtering / advanced filtering and selection summary) the offset for the sticky scroll needs to be adapted. We've frequently forgotten to do this, causing a weird layout issue.
Additionally, when hovering over a cell which is behind the head, it can peek through.
Possible fix
Use resize-observer directive and set CSS custom property based on the updated height of the resize observer and use it as a parameter for the top
offset.
Verification steps
- Go to https://gitlab.com/gitlab-examples/security/security-reports/-/security/vulnerability_report
- Set "Show 100 items" in the bottom right corner
- Select all vulnerabilities by clicking checkbox in table head
- Choose "Dismiss" as status
- Click "Change status"
- The form should show error messages. Verify that if you scroll the filtering + selection summary stick nicely to the top
- Select a dismissal reason and add a comment. Set network throttling to "offline".
- Click "Change status". The selection summary shows a long list of IDs of failed updates. Verify that if you scroll the filtering + selection summary stick nicely to the top
You can try a lot of other combinations with using the "group by" feature, using advanced filtering, ... and verify that the sticky position of the table is correct.
Edited by Lorenz van Herwaarden