Editor: Mobile: the single column breakpoint isn't big enough for small devices

[designsimply]

This is a re-cap of a discussion about one vs. two column views on mobile devices.

Raised by @kriskarkoski

In landscape view on the iPhone 6 the editor displays in two columns, which makes the content column narrow and cramped. The two column view is intentional for larger devices like the iPad, but single-column should probably be used on phones for both portrait and landscape views.

Here's what it looks like [as of 15-Sep-2015]:

Note from @mtias

This is a calypso wide breakpoint. I've commented before that we should consider moving it up a bit.

Note from @folletto

Ideally, I think the editor requires a different breakpoint that is just its breakpoint. It's a different piece of UI imho.

Note from @adambbecker

I'm a pretty firm believer that breakpoints should be created & utilized based on the content / design rather than device values or seemingly arbitrary values.

For most sections of Calypso, having a pre-defined set of breakpoints makes sense because the major layout / content areas are the same size and they follow familiar patterns. However, it looks like the editor's case, some of those same values are not as useful. That's totally okay (imo) and my vote would be to utilize breakpoints / values based on the design breaking and not to worry too much about pre-defined values and/or devices specifications, although they are good starting points.

Ideally, I think the editor requires a different breakpoint that is just its breakpoint. It's a different piece of UI imho.

I agree with @folletto here, especially since it's such a unique piece of UI. I think @mtias what he meant by that was to allow the editor to utilize a breakpoint(s) that works for it and not necessary add that breakpoint as a general variable to the project at large.

Note from @mtias

My concern is that the structure of the editor uses the framework layout pieces (sidebar toggles, mobile navigation, etc, via shared components), so adjusting it just for the editor is non trivial.

Note from @MichaelArestad

TBH, I don't think other sections work very well at that breakpoint. It could probably be a tiny bit larger.

Note from @rralian

So I'd like to propose that we trigger the single-column breakpoint for the editor at x < 721 which would force a single-column layout for the press-this size, which is 720x570. Two columns is looking a little better now than it did before, but it still feels pretty jumbled right now. (6433-gh-calypso-pre-oss)

Note from @kellychoffman

I like this idea, but I think we will need to pull out the GC actions at this breakpoint, especially Publish.

Note from @mtias

Once we have the "editor-primary-button" component we could just drop it there.

[kellychoffman]

Here's what it looks like [as of 15-Sep-2015]:

Screenshot taken today [7-Dec-2015] from iPhone 6+:

[lancewillett]

This is not valid any more since editor has been refreshed a few times — sidebar is now on the right-hand side. Let's open new issues for bugs we see in the newer version.