Iterate on min and max state of dropdowns
Problem to solve
When a dropdown input is close the the edge of a viewport or bound (particularly the right edge)- the content of the dropdown aligns to the left of the input instead of to the right.
|MRs (current)||MRs (example)||Lists (example)|
There a two issues here that could perhaps be iterated on.
- When the dropdown options are short (not wide), the dropdown content box is wide, and everything aligns left, it seems a bit hard to correlate the options with the dropdown input button (like those 3 in the first example). For example here,
check out branchalmost seems correlated to the dropdown options in merge requests.
- Even when the dropdown is aligned to the right of the input, short strings of content currently still would be contained with a dropdown box of around ~240px. I wonder if the dropdown width could be a bit more accommodating of the content? Example of what it looks like now:
- Define min-max of the dropdown
- Define variability of mix-max
- Perhaps more documentation on how dropdown should behave when an edge is detected
- Iterate on visual correlation of the dropdown with the dropdown input. Could the be closer together? Is there some visual treatment we could use to better correlate the two items?