x/playground: UI disappears with a small window

[egonelbre]

In https://play.golang.org/ when you click "Share" and the browser window area is less than 900px then the UI disappears.

[smasher164]

Before the dropdown was added to the banner, that breakpoint was 775px.
Moving #shareURL, #embedLabel, and .js-playgroundToysEl from under #controls to under #banner fixes this issue, but extra styling must be applied to keep those elements inline with those inside #controls.

[egonelbre]

Any reason not to switch to using flexbox which should behave better in presence of wrapping?

[smasher164]

My solution above is more of a stop-gap measure. I believe the styling used in the updated golang.org design already has flexbox. There is a pending CL to update the playground with this design.

That being said, I agree with you that it's probably better to just switch to flexbox to address this issue, since future additions to the playground would only exacerbate this breakpoint.

/cc @andybons Thoughts?

[andybons]

@egonelbre flexbox is fine with me. The playground UI was written far before that became a widely-supported feature.

[smasher164]

I am working on a CL for this. Will send it shortly.

[gopherbot]

Change https://golang.org/cl/229419 mentions this issue: playground: use flexbox for navbar layout