Twenty Fifteen editor styles look weird on mobile

[iseulde]

It doesn't look at all like what the front-end looks like.
Text is padded too much to the right.
Images are not resized to fit which causes the iframe to expand (off screen). There's no way to scroll horizontally and the editor is completely useless.

[iseulde]

Let's handle the images in #31253, which is a problem in all themes.

[lukecarbis]

Add media queries in the editor stylesheet, to better display lists and blockquotes.

[lukecarbis]

Some small additions to the editor stylesheet. The only effected elements were lists and blockquotes.

I've tested with RTL, but that's important enough to test again.

Please take a look at my "Contents" style commenting for the media query section. I've implemented 9.0: Media Query and 9.1: Mobile Large. But since there's only one media query size required, is it better to just have 9.0: Media Query Mobile Large?

[iamtakashi]

At the current state, the editor style is just for giving a nuance of how it'd look rather than pixel perfect replication of the front-end. If we really want to replicate the front-end, I think we'd need a quite lot of additional CSS. Issues I can think of right now are...

• The width of the editor is not equal to the viewport so it won't be exact like a front-end editor.
• On a tablet (larger than 783px viewport), the editor width varies if you have collapsed menu or not.

[lancewillett]

I think this needs more discussion. Which parts of editor styles aren't quite useful yet on mobile? Could we make a few small changes to make it better?

[DrewAPicture]

@iamtakashi @lancewillett: Is there a consensus here on whether this is something we should cover? I know the Press This team ran into similar issues when testing the editor, e.g. elements expanding beyond the viewport.

It's my understand they simply enforced responsive styles in the viewport, though @michael-arestad may have more information on the Press This implementation.

[lancewillett]

No consensus yet. Leaning toward closing as wontfix.

[iseulde]

Leaning toward closing as wontfix.

I would disagree. The font looks bigger and the text is indented in a way that makes it more difficult to edit the content.

[iamtakashi]

If we work on this, what would be the goal? There will always be cases like "too big text" or "too small text" compared with the front-end because of the issues I mentioned.

[lancewillett]

Let's table for this release. Goals for the changes need to more specific.

[jacklenox]

So the biggest problem here appears to be the content overflowing the width of the editor on mobile. The styling of lists is more subjective, but the width issue really does make the editor unusable.

The cause of this appears to be the fixed widths that are applied to the images and the HTML5 <dl> elements. This isn't just a problem with Twenty Fifteen, it's a potential problem for any theme, especially if it has HTML5 captions.

My patch above fixes two things. Below 660px it sets any width that has a max-width of 660px to 100%. This is arguably specific to Twenty Fifteen.

The second part is to force image and caption widths to be auto. This looks good to me because any image that is below the width of the viewport still looks as it should, and any image that is above the width is forced to fit in.

What do you folks thing of this approach? And given that the fixed widths on images and captions aren't necessarily incorrect, should we apply a variation of this to the editor for all themes?

[lancewillett]

Thanks, jacklenox. I agree with this approach to fix Twenty Fifteen (and maybe Twenty Fourteen and Thirteen).

Replying to jacklenox:

And given that the fixed widths on images and captions aren't necessarily incorrect, should we apply a variation of this to the editor for all themes?

CC @iseulde -- is there a method to load CSS rules for the editor (for any theme)?

[jacklenox]

Update to previous patch to include fixes for Twenty Fourteen and Twenty Thirteen

[lancewillett]

In 31849:

Bundled themes: update editor styles to better display images and captions in small screens.

Props jacklenox, see #31250.

[lancewillett]

Closing since we addressed the actionable item of the width problem with big images. Feel free to open new tickets for other problems.

[iseulde]

Let's handle the images in #31253, which is a problem in all themes.

Closing since we addressed the actionable item of the width problem with big images. Feel free to open new tickets for other problems.

@lancewillett: Actually we should have handled the image problem in the other ticket. This ticket is more about the other issue.

[jacklenox]

@iseulde: But the other issue is surely subjective and design-related? Rather than related to actual usability.

If the theme designer doesn't want to make the changes that you're suggesting, will this ticket ever be addressed?

[lancewillett]

The other issue -- visual differences -- was addressed by Takashi above:

At the current state, the editor style is just for giving a nuance of how it'd look rather than pixel perfect replication of the front-end.

Please open new tickets if you have specific bugs to address, like the width issue that was fixed in r31849.

[iseulde]

In 33418:

Revert [31849] and [33351]

Also set the max-width of images in themes to 100%, not in pixels.

See #33022 and #31250.