TinyMCE: the more tag placeholder is not displayed properly

[azaozz]

Happens when Twenty Thirteen | Fourteen | Fifteen is enabled. Caused by width: auto !important; for images in editor-style.css that was added in #31250, [31849].

Pinging @jacklenox: not sure why width: auto; has to be forced on all images and why this has to be !important.

Removing the !important bit fixes it (yeah, really hate the !important in css) :) Another possible fix is to add min-width to the image placeholders in the default editor css.

Another thing to keep in mind is that the editor runs in an iframe, and the @media screen and (max-width: 660px) applies to the iframe width, not the parent window width. So that media rule triggers most of the time, up to 1260px parent window width.

Replying to azaozz:

Pinging @jacklenox: not sure why width: auto; has to be forced on all images and why this has to be !important.

I seem to recall that this depends on the settings of the image itself.

While removing !important will be ok for this more tag example, any large image which has been inserted via the media editor and has had an explicit width defined will break the editing experience for small screen users (where the screen is smaller than the image of course!).

Removing the !important bit fixes it (yeah, really hate the !important in css) :) Another possible fix is to add min-width to the image placeholders in the default editor css.

I'm not sure what this will fix, the problem is that some images are too large for the editor on small screens.

I didn't realise this had broken the more tag though so I'm sorry about this!

Maybe we need to create some sort of exception based on the class of the more tag placeholder image?

Would that fix it?

I also don't like seeing this in a theme. Maybe we should fix this in core?

This ticket was mentioned in ​Slack in #core by obenland. ​View the logs.

Lets add min-width in the default editor style for now. We're planning to add something similar by default, will revisit it then.

In 33351:

TinyMCE: add min-width to the placeholder images for the more and nextpage tags to fix them in themes that force width = auto.
Fixes #33022.

The important seems to be unnecessary in [31849].

The important seems to be unnecessary...

It also breaks captions text wrapping and ability to align them in the center.

This ticket was mentioned in ​Slack in #core-editor by azaozz. ​View the logs.

In 33418:

Revert [31849] and [33351]

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

See #33022 and #31250.