Buttons are not centered after the latest update

MartinXPN commented 1 week ago

Describe the Bug

Seems like after the latest update, the buttons that used to be centered in the emails are not centered anymore. When running in dev mode, everything renders perfectly. Yet, when sending an actual email, the buttons are not centered anymore.

Which package is affected (leave empty if unsure)

@react-email/button, @react-email/components, @react-email/container, @react-email/section

Link to the code that reproduces this issue

https://github.com/MartinXPN/nextjs-firebase-mui-starter/tree/main/functions/emails

To Reproduce

Here is the code to reproduce the issue:

import {
    Body, Button, Container, Head, Hr, Html, Link, Preview, Section, Text,
} from '@react-email/components';
import React from 'react';

export const StreakReminderEmail = ({userId, streak = 0}: {
    userId: string,
    streak: number,
}) => (
    <Html>
        <Head/>
        <Preview>Consistency is Key. Keep your streak going!</Preview>
        <Body style={{
            // eslint-disable-next-line max-len
            fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
            lineHeight: '24px',
            // backgroundColor: '#ffffff',
        }}>
            <Container style={{margin: 'auto'}}>
                <Text style={{
                    fontSize: '24px', fontFamily: '"Montserrat",sans-serif', fontWeight: 'bold',
                    textAlign: 'center', whiteSpace: 'pre-line', paddingTop: '32px',
                }}>
                    You are on a {streak} day streak 🔥
                </Text>
                <Text style={{fontSize: '16px', textAlign: 'center'}}>
                    Consistency is key!
                    Keep the streak going by learning something new today!
                </Text>

                <Section style={{display: 'flex', justifyContent: 'center', width: '100%'}}>
                    <Button style={button} href="https://profound.academy">
                        Continue Learning
                    </Button>
                </Section>

            </Container>
        </Body>
    </Html>
);

export default StreakReminderEmail;

const button = {
    backgroundColor: '#fa541c',
    borderRadius: '50px',
    color: '#fff',
    fontSize: '16px',
    fontWeight: 'bold',
    textDecoration: 'none',
    textAlign: 'center' as const,
    maxWidth: '100%',
    paddingLeft: '24px',
    paddingRight: '24px',
    paddingTop: '12px',
    paddingBottom: '12px',
};

Expected Behavior

The button should be centered. It used to be centered using the previous version. It's shifted to the left instead now (see the screenshot below)

What's your node version? (if relevant)

20

gabrielmfern commented 1 week ago

What email client are you testing this on?

This might be because justify-content does not have the best support, not sure why this would work on an older version of ours as this isn't really very well-supported.

MartinXPN commented 1 week ago

Gmail (both web and mobile). It used to work just fine. Doesn't work anymore and I'm not sure why.

gabrielmfern commented 1 week ago

What version did it work on?

MartinXPN commented 1 week ago

Was fine with these:

    "@react-email/components": "^0.0.12",
    "react-email": "^1.10.0"

gabrielmfern commented 1 week ago

I don't see any changes that could break or help this behavior along those versions. If you want to center here, you can use tables since it will probably be more reliable, but it should not work on Gmail with justify-content.

Data about the justify-content property when using it on Gmail and Apple Mail. It shows that there is no support for it on Gmail and that it is widely supported on Apple Mail

MartinXPN commented 1 week ago

Interesting... it used to work fine. Can you provide a bit more details on what would be the right way to center the button with the latest version?

But I'm pretty sure there have been some changes that affect how things render. Please see the screenshots below. I just took them. One is from Feb 19 (that centers the button) and the other one is from today (the one that failed to center the button). There are no code changes on our end.

gabrielmfern commented 1 week ago

I don't think looking at a screenshot of what happened back then is going to be reliable to understand if the issue is on our side, since Gmail might have updated things back and forth on this. Not sure. Will be more reliable if you roll back the version and check if it is working with Gmail right now or not.

Can you provide a bit more details on what would be the right way to center the button with the latest version?

Something like this should work:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <Button style={button} href="https://profound.academy/">
                Continue Learning
            </Button>
        </td>
    </tr>
</table>

MartinXPN commented 1 week ago

Thanks for the provided code. This worked:

<table width="100%" border={0} cellSpacing={0} cellPadding={0}>
    <tbody>
        <tr>
            <td align="center">
                <Button style={{...button}} href="https://profound.academy">
                    Continue Learning
                </Button>
            </td>
        </tr>
    </tbody>
</table>

Seems like most react-email examples (like this one) use way simpler methods to center buttons. Do you think there is a better/simpler way of reliably centering a div in emails?

P.S. I tried to downgrade the libraries and the button is not centered anymore. So, it seems like there has been some update to how Gmail renders things.

gabrielmfern commented 1 week ago

Good to know that it's a Gmail issue.

Yeah, those examples align it with a text-align: center, it should work in your case as well if you do it with that. But I don't remember exactly if that works because Section uses a table under the hood, or if it's because Button is an <a>. It might be the former.

Going to close the issue as not planned since this is a Gmail issue.

MartinXPN commented 1 week ago

Sounds good, thank you so much for your help!

resend / react-email