[E-mails] [New post] Post content is stretched wide in some cases

[ivan-ottinger]

Quick summary

There's a report of post content being stretched wide in the "New Post" email template when displayed in some email clients, mostly the Mail app in macOS. So far, the issue was reported by one user only and it looks like the root cause is in one of the elements in the post content.

Details: pdDOJh-fZ-p2#comment-222 (original report)

Steps to reproduce

It is not yet clear how the issue could be reporduced

What you expected to happen

Post content should be inside fixed email body.

What actually happened

Pot content is unnecessarily stretched.

Context

No response

Browser

No response

Simple/Atomic

No response

Other notes

No response

Reproducibility

Consistent

Severity

One

Available workarounds?

No but the platform is still usable

Workaround details

No response

[AMcGrady]

From a user:

Here is another thing I noticed: If the email displays too large to fit a single display, if forwarded, the forward is the correct size. If the email displays properly, and you forward that, the forward is too large.

[yansern]

Since img has max-width: 100% already, perhaps some form of word wrap is needed.

https://www.caniemail.com/features/css-white-space/ https://www.caniemail.com/features/css-word-break/

[foleynotrose]

Is this related to this issue?

5294023-zd-woothemes

User is reporting that columns are not being handled correctly in New Post Emails: https://snipboard.io/Xdk4yK.jpg

Corresponding post: https://martech.zone/how-to-build-an-authentic-brand/

What you’re seeing is a 2 column inserted with Gutenberg, where there’s paragraph left and then a Tweet inserted on the right.

For the email, I would think that it would gracefully respond as in a mobile view - where the columns would simply fall in line vertically rather than horizontally.

[alinclamba]

Hi,

Any update on @foleynotrose comment above, please?

The ticket popped up after a week and we're not sure how to proceed.

Thank you! 🙌

[ivan-ottinger]

Hey @foleynotrose & @alinclamba 👋🏼

Thank you for the report. I reviewed the case the user encountered. This is the correct issue: https://github.com/Automattic/jetpack/issues/20694. I have added the report there.

[mxhassani]

I just encountered a similar case here: 5554572-zd-woothemes

The user forwarded the email they received here: 5559993-zd-woothemes

Interestingly, opening the email HTML code in FF shows the problematic behavior - gave it a quick look, and it appears some of the table tags are taking the inline CSS propriety width: 2138.515625px

For troubleshooting purposes, while not a valid email HTML move, applying the following in console seems to fix the appearance:

table{
  width: 100% !important;
}

The original content of the post in question doesn't appear to exhibit any particular issues and doesn't contain such table tags.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5294023-zen
• [ ] 5554572-zen
• [ ] 5559993-zen

[TimBroddin]

I'm investigating this issue, and it's caused by the <pre> tag.

[TimBroddin]

A small bit of helper code I've written to find out which element causes the overflow. The last one it prints is the culprit:

const findBadElement = () => {
    const parent = document.querySelector('.is-email');
    while(parent.offsetWidth > 1000) {
        const firstChild = parent.firstElementChild;

        parent.removeChild(firstChild);
        console.log(firstChild);
    }
}

[ivan-ottinger]

D88476-code is now merged and deployed → issue is fixed. Thank you @TimBroddin.