Fix caret position of dropdowns with full widths

Description

The dropdown caret was recently updated to a svg (🎉), but this broke some dropdowns in GitLab which used dropdown-menu-toggle class which set the width + move the caret over to the end of the input (😞).

We've implemented a GitLab CSS fix for this here gitlab!24273 (merged), but we should fix this upstream...

TODO

• Fix the caret position (and create visual snapshots) for
  • full width dropdown
  • empty text dropdown
• In the GitLab UI upgrade MR remove the block of code that references this issue

Original description

Set widths on <dropdown>

This is a two-fold issue that occurs when a dropdown has a set width. Firstly, the caret doesn't align to the left, ad secondly the text can bleed out of the dropdown. See attached images.

For the group security dashboard and the license management settings, I added some flex helper classes to the <gl-dropdown> component so the caret and the text aligned correctly. Though this doesn't fix the overflow issue.

The dropdown should probably handle these cases in gitlab-ui rather than having to hack it together on a per-use basis.

I'm not really sure how to go about fixing this though since it's partially a change in CSS lab/application.css too. Maybe #160 (closed) or #96 (closed) will help with this 🤷