Constrain the width of aligned images, media, blockquotes etc to a max of 75%

Problem/Motivation

Media embeds can be aligned-right or align-left (as well as aligned-center or not aligned). When align-right or aligned-left, there is an implicit assumption that there will be space on the opposite of the alignment.

• If aligned-right, it makes sense to allow space to the left of the media embed.
• If aligned-left, it makes sense to allow space to the right of the media embed.

This is arguable essential within the text editor to allow:

• a visual representation of the alignment
• space to edit the text wrapping around the aligned embed
• to prevent bizarre squished text

Text without much horizontal space for editing:

Text with the words exploded into letters:

This from feedback from @effulgentsia here #2801307-54: [META] Support WYSIWYG embedding of media entities:

[...] add CSS along the lines of max-width: 75% on media that's aligned left or right. It's fine for the media to be smaller. It's just that if you're explicitly choosing to align it left or right, then you're choosing to put something else beside it, which means leaving some amount of room for that something else.

Proposed resolution

• Must-have: Add a max-width for embedded media in CKEditor when aligned-left or aligned-right (only).

Additional suggested improvements:

Given that alignable elements are:

• Media Embeds aligned-left or aligned-right
• Media Embeds with captions aligned-left or aligned-right
• Images aligned-left or aligned-right
• Blockquote text aligned-left or aligned-right

Do the following:

• Add a max-width for alignable elements when aligned-left or aligned-right in Classy theme and themes that extend Classy.
• Add a max-width for alignable elements when aligned-left or aligned-right in the Demo Umami theme.
• Add some margin between alignable elements and the elements opposite in the CKEditor.
• Add some margin between alignable elements and the elements opposite in the Classy theme and themes that extend Classy.
• Add some margin between alignable elements and the elements opposite in the Demo Umami theme.

Remaining tasks

1. Determine the scope for this issue and add separate or follow-up issues for other issues.
2. Review
3. Test coverage
4. Commit.

User interface changes

TBD

API changes

None.

Data model changes

None.

Release notes snippet