Button: Outlook Desktop left/right padding no longer working

[kavika-1]

Describe the Bug

Testing in latest Outlook Desktop. Set padding to any value, say 20px. Top bottom/padding is working, but not left/right padding.

<Button style={{ padding: 20, background: '#00b', color: '#fff' }}>View</Button>

The generated code with <!--[if mso]> looks good, but it appears this is now no longer supported in recent Outlook builds?

This link seems to have an updated version of this approach: https://www.goodemailcode.com/email-code/link-button

"...sometime late 2022 Cosmin noticed the Beta version of Outlook stopped supporting letter-spacing. I was hoping this would be fixed but then in early 2023 this came out to the production version."

Which package is affected (leave empty if unsure)

@react-email/button

Link to the code that reproduces this issue

n/a

To Reproduce

Create an html email with a Button with left/right padding set to 20 to the latest Outlook Desktop. Set padding to any value, say 20px.

<Button style={{ padding: 20, background: '#00b', color: '#fff' }}>View</Button>

Expected Behavior

Expected the left/right padding to work, but Outlook Desktop ignores the fix.

What's your node version? (if relevant)

No response

[gabrielmfern]

Thank you so much for pointing this out!

[gabrielmfern]

This has been fixed under @react-email/button@0.0.16-canary.1 or @react-email/components@0.0.22-canary.0. Check it out and let me know if it works out fine for you.

Used a similar, but different workaround to theirs.

[matt-atticus]

I'm experiencing the following issue using @react-email/button@0.0.16-canary.1 in Windows Outlook 2021 and some earlier versions.

here's the html produced for the button:

<a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:12px 50px 12px 50px;color:#1b1c1d;background-color:red;border:1px solid #1b1c1d;border-radius:2px;font-size:16px;font-weight:bold" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;&#8202;&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Padded Button</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8202;&#8202;&#8202;&#8203;</i><![endif]--></span></a>

resulting in:

when the expected result is:

[gabrielmfern]

@matt-atticus How does the original JSX for the button look like?

[matt-atticus]

@gabrielmfern

        <Button
           href={href}
          style={
          {
        margin: '4px 0',
        padding: '12px 16px',
        color: 'black',
        backgroundColor: 'red',
        border: `1px solid black`,
        borderRadius: '2px',
        fontSize: '16px',
        fontWeight: 'bold',
        // include `msoPaddingAlt: 0` here to fix 
    }
          }>
            {text}
        </Button>

We managed to fix it by adding msoPaddingAlt: 0 to the Button style. Perhaps it's required for the <a> as well as the <span> that wraps the text

[gabrielmfern]

@matt-atticus Interesting, thanks for the heads up!

[gabrielmfern]

@matt-atticus Added the fix you mentioned in our component, you can install it (@react-email/button@0.0.17-canary.1 or @react-email/components@0.0.23-canary.1) and shouldn't need the extra msoPaddingAlt anymore!