select boxes don't work when they appear towards the bottom of a scrolling area

[indirectlylit]

Observed behavior

We've run into on at least two occasions.

First in learningequality/kolibri#3652, the select menu in the language switcher login-page caused major issues:

More recently in learningequality/kolibri#4016, select boxes that towards the bottom of scrolling areas (or that contain many items) have a very poor user experience because they require the user to scroll down in order to see the pop-up:

Unfortunately, this behavior is built-in to our current custom select widget, and in fact may be unavoidable for any custom select widget.

Expected behavior

A true native select box appears on top of everything, even the outer window:

Since we cannot achieve this and retain our custom styling, we should avoid using select boxes anywhere that they might exhibit this type of behavior. In particular, this means:

1. Select boxes should always have a maximum number of items that can easily fit on the smallest screen size
2. Select boxes should never appear at the bottom of a scrolling pane

We should also update our style guide with guidance to this effect

User-facing consequences

Hard to select items

Steps to reproduce

see steps in learningequality/kolibri#4016

Context

0.11

---

cc @khangmach @jtamiace