Simple list demo doesnt work in gmail

[hillac]

Describe the Bug

The simple list demo code with css inline styles fails to render correctly on mobile and desktop gmail. The numbers aren't centered, sometime the circles aren't circular either.

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/e87e6fc4d85f45b6a25df2d7bc1bd520627aaff2/apps/web/components/simple-list/inline-styles.tsx

To Reproduce

I create a new react email project with npx create-email@latest. Then create a new email with the code from simple list css inline styles demo code. Then run the dev server, and send the email to myself on gmail.

Expected Behavior

Number should be aligned correctly

What's your node version? (if relevant)

No response

[hillac]

I checked can-I-email and I can see the issue is align-items and justify-content are not supported by gmail. The preview servers css compatibility checker doesn't report any errors for this email. Also, it seems wrong to have demo code that's broken in one of the most popular email clients.

Without having to have a deep understanding of email safe css, is there an easy way to make the list demo work on all popular clients?

Also, shouldn't it be using the row and column components instead of manually styled divs to make the list?

Lastly, does this mean I can't trust any of the demo emails and components to be reliable on common email clients?