<!--- Please read this! Before opening a new issue, make sure to search for keywords in the issues filtered by the "regression" or "bug" label: - https://gitlab.com/gitlab-org/gitlab/issues?label_name%5B%5D=regression - https://gitlab.com/gitlab-org/gitlab/issues?label_name%5B%5D=bug and verify the issue you're about to submit isn't a duplicate. ---> ### Summary Note: This issue affects all dropdowns in GitLab UI. Therefore it was moved to gitlab-ui repository. See https://gitlab.com/gitlab-org/gitlab/-/issues/328541#note_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. <!-- Summarize the bug encountered concisely. --> ### 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. <!-- Describe how one can reproduce the issue - this is very important. Please use an ordered list. --> ### What is the current *bug* behavior? Dropdown is cut off and spills outside of the page width, showing a horizontal scrollbar. <!-- Describe what actually happens. --> ### 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. <!-- Describe what you should see instead. --> ### 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: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58488#note_550329584 ### Possible fixes 1. Switch the filters back to how they used to render before https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58488 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 | |-----------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------| |  |  |