ui: fix wrapping of dropdown items

[psybuzz]

Long items within tb-dropdown are supposed to wrap onto multiple
lines. Our CSS was incorrectly using a selector without enough
specificity, and Angular was overriding our classname.

Before

After

[stephanwlee]

Would it be at all possible to use native select instead of wrapping content? I have not seen many instances where there are multi-line formatting on <select>

[psybuzz]

Would it be at all possible to use native select instead of wrapping content? I have not seen many instances where there are multi-line formatting on <select>

The original motivation for making items wrap is so that very long experiment names in an experiment dropdown would be at least readable in their entirety. The longest tag names are usually not as long as the longest experiment names, but they happen to share the same component. The tradeoff is we either can show the full option text on multiple lines, or avoid wrapping entirely and lose the full name, which may help distinguish similar long experiment names. Could you confirm which is preferable?

<tb-dropdown> in the tag filter updates as the user types, so I think opening a native <select> would steal focus from the text input field, interrupting typing.