eladnava/mailgen

Button Styling Looks Off In MS Outlook Web

JPStrydom opened this issue · 3 comments

JPStrydom commented

image

This image shows the button I get when viewing my email (with the default theme) in outlook web. It looks fine on MS Outlook's desktop app, it just look funny in their web app. I believe it has something to do with the line height, but I might be mistaken. Any idea how to fix this without using a custom theme?

eladnava commented

Hi @JPStrydom,
Thanks for the report!

Just wondering, how did you fit a description in the button text? Are you using a new-line character (\n)?

The button.text is a string which only expects to receive a single line or phrase:

            button: {
                color: '#22BC66', // Optional action button color
                text: 'Confirm your account',
                link: 'https://mailgen.js/confirm?s=d9729feb74992cc3482b350163a1a010'
            }
JPStrydom commented

I've only given it a single line, much like your example.

eladnava commented

Hi @JPStrydom,
I believe the solution would be to add a white-space: nowrap CSS declaration to the button text.

Can you please try to reproduce by using a shorter button text such as Test Button? Does it still break into two lines?