netlify / gotrue

An SWT based API for managing users and issuing SWT tokens.
https://www.gotrueapi.org
MIT License
3.78k stars 279 forks source link

Fix styling for Apple Mail #350

Closed matthojo closed 9 months ago

matthojo commented 1 year ago

- Do you want to request a feature or report a bug? Bug

- What is the current behavior? The emails are offset on Apple Mail

- If the current behavior is a bug, please provide the steps to reproduce. View Identity emails in Apple Mail

- What is the expected behavior? Add style="padding:0;" on the body element of Identity emails to fix the display issue on Apple Mail.

- Please mention your Go version, and operating system version.

Support issue: https://github.com/netlify/pillar-support/issues/461

jackbrewer commented 11 months ago

@matthojo Are you sure this is in the correct repo?

matthojo commented 11 months ago

@jackbrewer not at all 😄 I was informed this is the default repo for identity but unsure if it’s where the emails live.. sorry! Please feel free to move it if you know where it should live

jackbrewer commented 11 months ago

Slowly figuring it out. We are in the right repo… we just don't have a body element to add the padding to. For the default templates, this is the entire HTML payload which gets sent (viewed in Apple Mail):

Screenshot 2023-07-28 at 10 37 11

Viewing the source within the Gmail interface confirms. The highlighted div is part of the Gmail interface, directly wrapping our fallback content:

Image

The HTML comes from here: https://github.com/netlify/gotrue/blob/3fabd3fc5a6fb51eb54cd88831a380a4c18a2eff/mailer/template.go#L17-L35

For a custom template, I'd guess the padding fix would need to be applied within the custom template itself. We'll need to create a reproduction template with the alignment issue to verify.

matthojo commented 11 months ago

@jackbrewer These seems like a lot of effort. Would you like to proceed, or shall we call this one a wontfix based on effort to problem.

jackbrewer commented 11 months ago

Had a quick play. We don't output a <body> element as part of the identity emails, so we're unable to add the padding: 0. We also recommend not to add one in a custom template on our docs site.

In testing, I found that without a body I could replicate the unwanted padding. If I ignored the docs advice and added one to my custom template, I could get rid of that problematic padding. I'd suggest this as a fix for this specific issue, but I don't have the additional context for why we advise otherwise, and what side-effects may be introduced across other email clients (👀 looking at you Outlook).

No body element body added within custom template
image image

(Dark border indicates the edges of the preview area within Apple Mail. Please excuse the broken images 😅)

I'd suggest wontfix for now based on low impact, and the potential workaround available.