Skip to content

Commit

Permalink
Use the full width in the email header
Browse files Browse the repository at this point in the history
I was initially foiled by MJML not supporting auto-growing columns
(or rather, them not being able to get that to reliably work in
Outlook Desktop:
mjmlio/mjml#1669 (comment)),
and thus set the right-hand column (the one containing the "Sign
in" link) to 60%, hoping that that would look reasonable enough
on most screen sizes — on large screens, it would be fairly right-
aligned, and on smaller screens, it wouldn't be pushed to the next
line.

However, the second thing that confused me was that MJML's columns
don't take effect on viewport widths smaller than 480px, i.e.
they're wrapped in media queries starting at that level.

If I just only test on wider viewports, then I can actually just
set the columns to together span 100%. The image itself still has
a fixed width of 200px, so that won't auto-grow anyway. Only
downside is that the "Sign in" link will still be pushed to the
next line on screens under 480px, but I guess that's just
something we'll have to live with.
  • Loading branch information
Vinnl committed Aug 20, 2024
1 parent 4a185e0 commit 405d247
Showing 1 changed file with 12 additions and 2 deletions.
14 changes: 12 additions & 2 deletions src/emails/templates/EmailHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ export const EmailHeader = (props: Props) => {
padding="10px 20px"
background-color="white"
>
<mj-column width="200px" vertical-align="middle">
<mj-column
width="60%"
padding-left="0"
padding-right="0"
vertical-align="middle"
>
<mj-image
alt={l10n.getString("public-nav-name")}
src={`${process.env.SERVER_URL}/images/email/monitor-logo-with-bg.png`}
Expand All @@ -26,7 +31,12 @@ export const EmailHeader = (props: Props) => {
align="left"
/>
</mj-column>
<mj-column width="60%" vertical-align="middle">
<mj-column
width="40%"
padding-left="0"
padding-right="0"
vertical-align="middle"
>
<mj-text align="right">
<a
href={`${process.env.SERVER_URL}/user/dashboard/fixed?utm_source=monitor-product&utm_medium=email&utm_campaign=${props.utm_campaign}&utm_content=sign-in-us`}
Expand Down

0 comments on commit 405d247

Please sign in to comment.