Fix for Text Mode toolbar

[ShreyaSingh10]

Description

The Text Mode toolbar is entirely visible in every screen resolution

How Has This Been Tested?

With the help of Chrome Inspector
#3041

Screenshots (jpeg or gifs if applicable):

Types of changes

Checklist:

[aduth]

It appears beyond just the formatting controls that the entire editor component layout (.editor-layout__editor) is potentially hidden behind the fixed editor toolbar on small screens. In visual mode this is offset by some padding on .editor-visual-editor but it doesn't seem to be enough. I suggest we add margin to the .editor-layout__editor.

Also be mindful of CSS coding guildelines, where the introduced styles should be structured using tabs, not spaces:

https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#structure

[ShreyaSingh10]

@aduth I have changed the margin to the css class you suggested. Though now toolbar looks aligned slightly to right if you can confirm i will fix that.

[aduth]

I'm going to add a Design Review label because while I agree we should have this margin, it prompts whether we should then adjust the padding of .editor-visual-editor in smaller displays. Now there is a fairly large gap between the toolbar and title in mobile viewports in Visual editing mode.

Though now toolbar looks aligned slightly to right if you can confirm i will fix that.

I'm not seeing this myself.

[aduth]

I think we ought to define this style mobile-first with margin-top: 56px; and a media query to reset on larger displays. There are a number of mixins and variables available for this. I think you'll want:

margin-top: 56px;

@include break-small {
	margin-top: 0;
}

...inside the .editor-layout__editor selector.

[ShreyaSingh10]

@aduth I have done the changes.

[aduth]

@jasmussen Do you have any thoughts on how we might best address the gap mentioned in #3043 (comment) ?

[jasmussen]

Thank you for the PR, and thank you for opening #3041, appreciate it. The ticket certainly does reveal that we haven't given the text mode the love it deserves.

While there are issues in master, I don't think there's an easy fix, and although I appreciate the work done here, I suspect that we'll have to go a bit back to the drawing board when it comes to text mode. There's even disagreement whether the quick tags toolbar should even be there, and given the incoming codemirror implementation in 4.9, I suspect we'll want to redo that section regardless. As such, I would thank you for this PR, but I would not merge it, or even try to fix the implementation as it is today. Since I'm the person who built text mode as it is today, sorry about that ;)

Instead, I will open a new ticket to redesign the text mode once codemirror hits 4.9, and I will link your ticket as well as other past text mode tickets, so we can have a new umbrella ticket for improvements.

Some of the issues highlighted by this PR can be seen here:

[gziolo]

@ShreyaSingh10 do you plan to finish this PR or should someone else take it over?

[youknowriad]

Closing as this toolbar has been removed for now. Thanks for the time spent on this PR.