Dropdown runs outside of container on mobile

[blackbaud-brandonhare]

Expected behavior

The text should adjust to the size of the container.

Actual behavior

The text overflows outside of the container.

Steps to reproduce

1. Open the SKYUX2 documentation for the Action Button in Chrome.
2. Use the device toolbar to view the page on an iPhone 5 (or at 320px width).
3. Scroll down to Code sample section

[Blackbaud-PatrickOFriel]

So this is specifically a problem with tab dropdowns, not dropdowns in general, because the parent tabset control has overflow: hidden applied to it. We have a couple possibilities.

1. Cut off the tab dropdown button title when it's longer than the screensize, and add text-overflow: ellipsis.

(For my use if we choose this sky-tabset-dropdown: width: 100%, sky-dropdown-button-type-tab: width: 100%, display flex on parent of title and arrow, flex-shrink: 1 overflow: hidden text-overflow: ellipsis on title parent, flex-grow: 1 on arrow parent)

2. Add some sort of word wrap to the title which will cause wrapping when the title is longer than the screensize.

What do you think, @Blackbaud-ToddRoberts, ?

[Blackbaud-ToddRoberts]

Ellipsis seems safer in case someone uses a narrow button, where wrapping would make it take up a whole vertical page.

[Blackbaud-PatrickOFriel]

In 2.0.0-beta.18