From 405d24789e9eb38450c8bbe9a2ae9ffec51fd3ca Mon Sep 17 00:00:00 2001 From: Vincent Date: Mon, 5 Aug 2024 11:48:10 +0200 Subject: [PATCH] Use the full width in the email header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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: https://github.com/mjmlio/mjml/issues/1669#issuecomment-519103934), 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. --- src/emails/templates/EmailHeader.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/emails/templates/EmailHeader.tsx b/src/emails/templates/EmailHeader.tsx index ea154e8ee92..0fd079c258d 100644 --- a/src/emails/templates/EmailHeader.tsx +++ b/src/emails/templates/EmailHeader.tsx @@ -17,7 +17,12 @@ export const EmailHeader = (props: Props) => { padding="10px 20px" background-color="white" > - + { align="left" /> - +