Email Layout Breaks in iOS Email App

[dennypradipta]

Bug Description

It seems that the layout breaks in iOS email app, but not in GMail and Outlook app.

How to Reproduce

Sent an email using Mailgen template, and open it in the device

Screenshot

[eladnava]

Hi @dennypradipta,
Thanks for opening this issue. Unfortunately I'm unable to reproduce on my iOS 14 device. Here's how it renders on my side:

The template is correctly scaled to the width of the screen. Please paste your e-mail building code which you are feeding into Mailgen so I can try to reproduce.

[dennypradipta]

After further investigation, it seems that it breaks in iOS app when you have a long “name” (in this case is John Appleseed)

In the previous screenshot I provided, I displayed two emails like “Hi denny@emailprovider1.com, denny@emailprovider2.com”

I tested using one email, and it works perfectly

Is there any way to prevent it?

[eladnava]

Hi @dennypradipta,
Even after trying to send an e-mail with a name of denny@emailprovider1.com, denny@emailprovider2.com, the default template was correctly scaled:

Please copy and paste the exact email object you are passing into mailGenerator.generate(email) so I can try to reproduce it on my side.

[dennypradipta]

Here's how I put it:

  const mailGenerator = new Mailgen({
    theme: 'default',
    product: {
      name: 'Monika',
      link: 'https://monika.hyperjump.tech/',
      logo:
        'https://raw.githubusercontent.com/hyperjumptech/monika/main/docs/public/monika.svg',
    },
  })
  const email = {
    body: {
      name: `${opt.to}`,
      intro: [
        `${opt.subject}`,
        `<div style="white-space: pre-wrap;">${opt.text}</div>`,
      ],
    },
  }

  const emailTemplate = mailGenerator.generate(email)

In the opt.to, I use two email just like the above. As for the opt.subject I use New Incident from Monika.

Now for the opt.text:

const messageBody = `Message: ${recoveryMessage}${expectedMessage}

URL: ${meta.url}

Time: ${meta.time}

From: ${monikaInstance}

OS: ${osName}

Version: ${userAgent}`

It should render something like this:

Message: Login API Response time is 634 ms, expecting less than 60>

URL: https://reqres.in/api/login

Time: 2021-10-19 16:29:38 +07:00

From: Singapore - Cloudflare, Inc (xxx.xxx.x.x) - ThinkPad (192.168.0.1)

OS: Ubuntu 20.04

Version: @hyperjumptech/monika/1.6.2 linux-x64 node-v14.17.6

[eladnava]

Hi @dennypradipta,
Thanks for the reproduction code. Unfortunately, I am still unable to reproduce, and the e-mail renders correctly:

Without being able to reproduce, I am unable to fix the issue. You're welcome to experiment with tweaking some things to see whether you are able to work around this issue, such as using a different theme like cerberus:
https://github.com/eladnava/mailgen#supported-themes