search

resend / react-email

💌 Build and send emails using React
https://react.email
MIT License
12.67k stars 583 forks source link

Some styles are not respected in eM Client #1382

Closed Taylowi closed 1 month ago

Taylowi commented 2 months ago

Describe the Bug

Seems some styles are not applied in eM Client, max width for instance seems to be ignored when there are multiple emails with the same subject.

This does appear to happen when using react-email, but not with email builders like sendgrid.

This could easily be construed as a bug with eM Client, and happy for it to be closed with that reason.

Mainly wondering if this has been come across before and if there is any advice.

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/resend/react-email/blob/canary/apps/demo/emails/notifications/vercel-invite-user.tsx

To Reproduce

Here is an example with one of the demo emails:

Screenshot 2024-03-26 at 16 06 59

Can reproduce by sending a test email and opening in eM Client

Expected Behavior

The CSS is respected

What's your node version? (if relevant)

No response

gabrielmfern commented 2 months ago

Wonder if this is an incompatibility of Tailwind with the email client you mentioned. Do any of the other emails, that don't have Tailwind in them, have this issue as well?

Taylowi commented 2 months ago

Wonder if this is an incompatibility of Tailwind with the email client you mentioned. Do any of the other emails, that don't have Tailwind in them, have this issue as well?

I will try tomorrow refactoring out of tailwind to see if that solves the issue and report back.

gabrielmfern commented 1 month ago

I see you closed the issue @Taylowi, was it not with React Email?

Taylowi commented 1 month ago

It seems there are some nuances with how certain clients handle CSS and with some of them not offering tools for easy debugging it was hard to understand the problem in depth, we are still seeing some issues where heights and widths are not respected and children are able to override maximums of their parents.

However we have been able to resolve these by being more strict with ensuring that children are not overflowing parent containers.