Audit and improve component behavior on mobile

[jattasNI]

😯 Problem to Solve

The SLE LIMS app has a requirement that it "work on mobile" but we haven't designed Nimble components with this in mind. This issue is a starting point to track doing the work of auditing components and to track known issues.

Known issues

1. Can't access tabs if the screen width is too narrow to see all items. Should we allow horizontal scroll? Show some arrow affordances to indicate that tabs are overflowing?
2. Toolbar content that doesn't fit horizontally has poor overflow behavior. The high level guidance from IxD is that additional content should move to an overflow menu. But we need to decide things like:
   • how apps should detect this situation; media/container queries can only affect CSS, not the HTML toolbar content
   • what to do about non-button items that don't translate naturally to menu items
   • how to decide which content goes in the menu. Right-most first? Least important first?
   • 
3. Breadcrumb wraps its content if the screen width is too narrow to see all items. This looked odd to me: I think I expected it to clip, possibly with ... at the start or the middle.
4. Drawer has a fixed width which is often wider than a mobile screen. Even if we set it to max-width: 100%, the contents of many drawers are too wide for mobile (e.g. the SLE properties page grab handles are cut off)
5. Button text wraps when it should probably remain on one line. This ends up messing with the padding of the button since the buttons stays at 32px but with multiple lines of text within it. #2384
6. Select still uses a desktop popup rather than the native picker
7. Select, when client specifies max-width, correctly ellipsizes the selected text but not the text in the drop down.

💁 Proposed Solution

[jattasNI]

The current plan is for @fredvisser to check with SLE POs on the priority of this and then put it on our designers' backlog as appropriate.

[m-akinc]

Related: #1436