Theme Customizer sidebar needs to accommodate the scrollbar and be more horizontally flexible

[helenyhou]

A continuation from Myatu's comment on #19910:

CSS: Controls in the content column, ie .customize-control-select select make use of fixed widths, which do not account for a scroll-bar that may appear if the expanded content exceeds the height of the browser window.

Also, the scroll bar looks wonky

Since not everybody is using Webkit on OSX, where it only shows as an overlay while scrolling, we need to mind the scrollbar. The fixed-width layout is also problematic for longer labels, as can be expected in theme-added sections and translations.

[helenyhou]

Patch​ on #19910 was a first pass at making the layout slightly liquid to prevent layout breaks when the scrollbar appears. Further discussion with koopersmith suggests that switching to labels on top of inputs would be preferable. This would also allow for brief descriptive/help text below inputs.

As for the scrollbar getting cut off at the top and bottom by the header/footer, we may have to look at adding some markup to fix that.

[ocean90]

Related: #20649

[helenyhou]

Horizontal flexibility fixed in [20777]. Still investigating what we can do not to cut off the scrollbar at the top and bottom.

[koopersmith]

In [20791]:

Theme Customizer: Prevent sidebar scrollbar from overlapping sidebar header or footer. fixes #20649, #20650, see #19910.