Editor: Hide toolbar borders dependent on sidebar presence

[aduth]

Related: #11536

This pull request seeks to resolve an issue where toolbar borders may be hidden in the editor if the settings panel is closed and between particular medium-size resolutions.

The changes now adjusts for .focus-sidebar, showing borders by default but hiding them if either the screen size is small enough that the editor hits the left and right bounds, accounting for when the settings panel is opened.

Before	After

Testing instructions:

Verify that toolbar borders are present on left and right when post editor settings panel is closed between medium resolution sizes, and present again at larger resolutions.

[matticbot]

Test live: https://calypso.live/?branch=fix/sidebar-toolbar-borders

[mtias]

Looking better. There's a moment where I get a horizontal scrollbar and this:

The Visual/HTML seems to switch place a couple times during resizing as well.

[Copons]

As for the Visual Toolbar, this change fixes the borders issue, so: 👍 .
It doesn't fix it for the HTML Toolbar and it does not take care of the mode toggler jumping around.

The change for the HTML Toolbar is really easy but there's a thing I'd like to know for sure before suggesting any change (@mtias this is for you!):
the HTML editor previously was width: 100%; max-width: 700px, while right now apparently it stays 100% up to the 960px breakpoint and then shrinks back to 700px.

Now, if this is a wanted change, I'll need to adjust the HTML toolbar width too, and I'd definitely do it in another PR, that I believe could also take care of the mode toggler.

If instead this is an unexpected thing, then, @aduth, it really is a matter of replacing 930px with 720px here: https://github.com/Automattic/wp-calypso/blob/master/client/post-editor/editor-html-toolbar/style.scss#L17 🙂

[mtias]

There was no intention to change the width of the editor itself. @jasmussen is this something that rings a bell to you?

[jasmussen]

There was no intention to change the width of the editor itself. @jasmussen is this something that rings a bell to you?

Some toolbar iffiness between the 660 and 960 does ring a bell, and some improvements are noted in #11996. But no, no intention of changing the toolbar width at all.

[Copons]

I'm not talking about the (HTML) toolbar's width, but the content's.

Here's a gif of what's happening to me: https://cloudup.com/cM-93br01f3 (linked because it's 7MB).

I honestly don't even remember how it was before the change, but if I look at how disjointed the content and the toolbar look, it's quite weird.

To be more clear, this is what happens in HTML mode:

<720px
Toolbar: 100%
Content: 100%

720px - 960px
Toolbar: 700px
Content: 100%

>960px
Toolbar: 700px
Content: 700px

Was the content (in HTML mode) 100% wide up to 960px even before?
That I can't remember, but if that's the way we want it, I'll update the HTML Toolbar to be 100% wide too.

Just, it doesn't look right to me for several reasons:

• The content shrinks back to 700px on >960px.
• In Visual mode the max width for both toolbar and content is definitely 700px, so it only makes sense to be consistent between the two of them.

[aduth]

Last few commits should clear up the reported issues, I believe.

[Copons]

There are some other issues I'm noticing.

HTML Toolbar's z-index is higher than the sidebar's, so it happens that on smallish screens the toolbar covers 1px of the sidebar:

This is easily fixable adding a z-index: 2 to the sidebar (with the whole z-index() function).
(Here's the reason why I had to give the HTML toolbar a z-index: 1: #11750)
Or carefully adjusting the toolbar width, maybe, but it sounds incredibly painful.

---

Again on smallish screens, but this time in both modes, when scrolling down, the sticky toolbars aren't sized correctly. (notice that it's shorter than the width).

This seems to be because the toolbar width, when fixed, is calculated as 100% - 273px, but at those screen sizes the sidebar is slightly smaller (229px).

[aduth]

Nice catches @Copons , thanks! These should be fixed in d99a5ea and 035c8de respectively.

Again on smallish screens, but this time in both modes, when scrolling down, the sticky toolbars aren't sized correctly.

I couldn't reproduce this in Visual mode and found per styles that it should be correctly applying pinned width for mid-size viewports:

https://github.com/Automattic/wp-calypso/blob/e002e8d/client/components/tinymce/style.scss#L52-L55