editor.js
editor.js copied to clipboard
Improve alignment on the left side of the editor
On desktop, the paragraphs are not aligned on the left border of the editor (there is some extra indentation) and also the plus icon stays outside the editor block.
For example, in the image above the "Some" (inside the editor) should be vertically aligned with "New" (content external to the editor). Please note that this is not an issue with my layout: the external content and the editor are normal divs that are perfectly aligned in my layout. The problem seems to be related to the icons of the editor that push the editor paragraph to the right.
This appears to be a duplicate of #2498
It happens because the media screen width detect if its a mobile or not. The width should include the toolbar width. From:
@custom-media --mobile (width <= 650px); @custom-media --not-mobile (width >= 651px);
To:
@custom-media --mobile (width <= 770px); //650px width + 120px of the toolbar @custom-media --not-mobile (width >= 771px);