On vulnerability report page, the right-most filter's dropdown menu is cut off at certain page widths

Summary

Note: This issue affects all dropdowns in GitLab UI. Therefore it was moved to gitlab-ui repository. See gitlab#328541 (comment 1102398678) for more information.

On the vulnerability report page, the right-most filter's dropdown menu is cut off at certain page widths:

It will occur under the following conditions:

1. The right-most filter must be as right as it can be in the filter panel.

2. The page width must be narrow enough that the filters are near their minimum width. To easily reproduce, reduce the page width until one filter line wraps, then increase the page width just slightly so that the filter no longer wraps.

Steps to reproduce

1. Go to a group-level vulnerability report, i.e. https://gitlab.com/groups/gitlab-org/-/security/vulnerabilities

2. Reduce the page width until the project filter wraps to a new line, then increase the page width slightly until it no longer line wraps.

3. Open the project filter dropdown.

4. Verify that the dropdown is cut off on the right, and has created a horizontal scrollbar on the page.

What is the current bug behavior?

Dropdown is cut off and spills outside of the page width, showing a horizontal scrollbar.

What is the expected correct behavior?

Dropdown is not cut off and does not spill outside the page width and does not show a horizontal scrollbar.

Developer's notes

This is a bug in Bootstrap 4.x, which carries over to vue-bootstrap. Dropdown menus detect if there's not enough vertical space below them and will open upwards, but oddly it wasn't considered that it might also happen in the horizontal direction.

While vue-bootstrap does have a right prop for <b-dropdown>, it's a manual prop and won't toggle automatically if there's not enough space for the dropdown to open to the right.

This bug was noticed after this MR was merged, which stretches the filters to use all the whitespace available, to avoid text truncation in the dropdown button: gitlab!58488 (comment 550329584)

Possible fixes

1. Switch the filters back to how they used to render before gitlab!58488 (merged) was merged. Disadvantage: text in the filters will be prematurely truncated like before.

2. Add more right padding to the filters container to ensure there's always enough space for the dropdown menu. Disadvantage: will look off when the page size gets to mobile size (though arguably the vulnerability list is unusable like this), so we will need to use media queries to remove the extra padding.

3. The filters container uses CSS grid. Change the CSS grid's minimum column width from 12rem to 13rem so that a filter's minimum width is wide enough so that opening the dropdown won't spill out. Disadvantage:

13rem: dropdown bug is avoided, but the first line of filters look a bit too wide	12rem: the filters look appropriately sized, but will lead to the bug