From 51821d5dfcc1b4d35fc519f571c0fc12c6305568 Mon Sep 17 00:00:00 2001
From: Nicholas Cristofaro <nicholas.cristofaro@thethingsindustries.com>
Date: Wed, 22 Jul 2026 13:17:51 -0300
Subject: [PATCH] dev: Adopt mjml 5 for email template generation

MJML v5 disabled mj-include by default. Enable includes in generate.sh
(--config.allowIncludes true) so the base template's trusted repo-local
partials resolve, and append a trailing newline that v5 no longer emits.
Regenerate base.html.tmpl and the golden files; the output is
functionally identical to v4 (whitespace and one attribute-order change
only).
---
 pkg/email/templates/DEVELOPMENT.md                        | 2 ++
 pkg/email/templates/base.html.tmpl                        | 8 +-------
 pkg/email/templates/generate.sh                           | 6 +++++-
 .../templates/testdata/api_key_changed.body.golden.html   | 8 +-------
 .../api_key_created.body.with_sender_ids.golden.html      | 8 +-------
 .../templates/testdata/client_requested.body.golden.html  | 8 +-------
 .../client_requested.body.with_api_key_id.golden.html     | 8 +-------
 .../client_requested.body.with_api_key_name.golden.html   | 8 +-------
 .../testdata/collaborator_changed.body.golden.html        | 8 +-------
 .../testdata/entity_state_changed.body.golden.html        | 8 +-------
 pkg/email/templates/testdata/invitation.body.golden.html  | 8 +-------
 pkg/email/templates/testdata/login_token.body.golden.html | 8 +-------
 .../templates/testdata/password_changed.body.golden.html  | 8 +-------
 .../testdata/temporary_password.body.golden.html          | 8 +-------
 .../templates/testdata/user_requested.body.golden.html    | 8 +-------
 pkg/email/templates/testdata/validate.body.golden.html    | 8 +-------
 16 files changed, 21 insertions(+), 99 deletions(-)

diff --git a/pkg/email/templates/DEVELOPMENT.md b/pkg/email/templates/DEVELOPMENT.md
index 5d74830434..17f24363ea 100644
--- a/pkg/email/templates/DEVELOPMENT.md
+++ b/pkg/email/templates/DEVELOPMENT.md
@@ -16,6 +16,8 @@ Each of these email templates gets rendered together with the base template that
 
 We use [MJML](https://mjml.io/) to generate the HTML base template `base.html.tmpl` from `base.mjml`. Do not edit `base.html.tmpl` directly. If you want to edit the HTML base template, edit the `.mjml` files and run `go generate ./pkg/email/templates` to update `base.html.tmpl`.
 
+`base.mjml` composes the repo-local partials `_attributes.mjml`, `_header.mjml` and `_footer.mjml` via `mj-include`. MJML v5+ disables `mj-include` by default, so `generate.sh` passes `--config.allowIncludes true`. This is safe here because the included files are trusted and committed to this repository.
+
 The HTML base template contains three blocks: **title**, **preview** and **body**. The **title** is typically not visible in emails, but would be visible if we start supporting "view this email online" functionality. The **preview** is a short text that many email clients render in the list view, next to the subject.
 
 ## Testing
diff --git a/pkg/email/templates/base.html.tmpl b/pkg/email/templates/base.html.tmpl
index 71cb95c41c..a187be261e 100644
--- a/pkg/email/templates/base.html.tmpl
+++ b/pkg/email/templates/base.html.tmpl
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   <!--[if mso]>
     <noscript>
@@ -61,7 +60,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   <!--<![endif]-->
   <style type="text/css">
@@ -71,14 +69,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -90,7 +86,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -100,13 +95,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">{{ block "preview" . }}{{ end }}</div>
-  <div aria-label="{{ block "title" . }}{{ end }}" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="{{ block "title" . }}{{ end }}" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/generate.sh b/pkg/email/templates/generate.sh
index fe11f446c6..1fa6695451 100755
--- a/pkg/email/templates/generate.sh
+++ b/pkg/email/templates/generate.sh
@@ -1,6 +1,10 @@
 #!/usr/bin/env bash
 
+# MJML v5+ disables mj-include by default; our base template composes trusted,
+# repo-local partials (_attributes/_header/_footer), so includes are enabled here.
 for template in $(find . -name '*.mjml' -not -name '_*.mjml')
 do
-  yarn run mjml $PWD/$template -o $PWD/${template%.mjml}.html.tmpl
+  yarn run mjml --config.allowIncludes true $PWD/$template -o $PWD/${template%.mjml}.html.tmpl
+  # mjml v5 omits the trailing newline; append one to keep a POSIX-clean file.
+  printf '\n' >> $PWD/${template%.mjml}.html.tmpl
 done
diff --git a/pkg/email/templates/testdata/api_key_changed.body.golden.html b/pkg/email/templates/testdata/api_key_changed.body.golden.html
index 31ef9b05d9..58858cbc9d 100644
--- a/pkg/email/templates/testdata/api_key_changed.body.golden.html
+++ b/pkg/email/templates/testdata/api_key_changed.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">An API key of your application "foo-app" has been changed.</div>
-  <div aria-label="API Key Changed" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="API Key Changed" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/api_key_created.body.with_sender_ids.golden.html b/pkg/email/templates/testdata/api_key_created.body.with_sender_ids.golden.html
index 78be3d5710..31c606e8df 100644
--- a/pkg/email/templates/testdata/api_key_created.body.with_sender_ids.golden.html
+++ b/pkg/email/templates/testdata/api_key_created.body.with_sender_ids.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">A new API key has just been created for your application "foo-app".</div>
-  <div aria-label="API Key Created" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="API Key Created" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/client_requested.body.golden.html b/pkg/email/templates/testdata/client_requested.body.golden.html
index ea5d8b2163..97c52b0aea 100644
--- a/pkg/email/templates/testdata/client_requested.body.golden.html
+++ b/pkg/email/templates/testdata/client_requested.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your review is required for a newly registered OAuth client.</div>
-  <div aria-label="Client Requested" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Client Requested" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/client_requested.body.with_api_key_id.golden.html b/pkg/email/templates/testdata/client_requested.body.with_api_key_id.golden.html
index 3ea3f03d48..2e4287ae11 100644
--- a/pkg/email/templates/testdata/client_requested.body.with_api_key_id.golden.html
+++ b/pkg/email/templates/testdata/client_requested.body.with_api_key_id.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your review is required for a newly registered OAuth client.</div>
-  <div aria-label="Client Requested" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Client Requested" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/client_requested.body.with_api_key_name.golden.html b/pkg/email/templates/testdata/client_requested.body.with_api_key_name.golden.html
index 4b848b0504..50eea2e7e4 100644
--- a/pkg/email/templates/testdata/client_requested.body.with_api_key_name.golden.html
+++ b/pkg/email/templates/testdata/client_requested.body.with_api_key_name.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your review is required for a newly registered OAuth client.</div>
-  <div aria-label="Client Requested" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Client Requested" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/collaborator_changed.body.golden.html b/pkg/email/templates/testdata/collaborator_changed.body.golden.html
index d5bc2bf678..bf9d6d50b1 100644
--- a/pkg/email/templates/testdata/collaborator_changed.body.golden.html
+++ b/pkg/email/templates/testdata/collaborator_changed.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">A collaborator of your application "foo-app" has been added or updated.</div>
-  <div aria-label="Collaborator Changed" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Collaborator Changed" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/entity_state_changed.body.golden.html b/pkg/email/templates/testdata/entity_state_changed.body.golden.html
index c43195739b..ee561a5879 100644
--- a/pkg/email/templates/testdata/entity_state_changed.body.golden.html
+++ b/pkg/email/templates/testdata/entity_state_changed.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">The state of your client "foo-cli" has been changed.</div>
-  <div aria-label="Entity State Changed" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Entity State Changed" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/invitation.body.golden.html b/pkg/email/templates/testdata/invitation.body.golden.html
index 3a50acfc3e..6072d4be7f 100644
--- a/pkg/email/templates/testdata/invitation.body.golden.html
+++ b/pkg/email/templates/testdata/invitation.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">You have been invited to join The Things Network.</div>
-  <div aria-label="Invitation" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Invitation" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/login_token.body.golden.html b/pkg/email/templates/testdata/login_token.body.golden.html
index 5c824530f9..39c4b6daf2 100644
--- a/pkg/email/templates/testdata/login_token.body.golden.html
+++ b/pkg/email/templates/testdata/login_token.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">A login token was requested for your user "john-doe".</div>
-  <div aria-label="Login Token" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Login Token" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/password_changed.body.golden.html b/pkg/email/templates/testdata/password_changed.body.golden.html
index a4242e28f8..ffda3a7d94 100644
--- a/pkg/email/templates/testdata/password_changed.body.golden.html
+++ b/pkg/email/templates/testdata/password_changed.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">The password of your user "foo-usr" has just been changed.</div>
-  <div aria-label="Password Changed" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Password Changed" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/temporary_password.body.golden.html b/pkg/email/templates/testdata/temporary_password.body.golden.html
index a882a8d4d8..85bb2f489f 100644
--- a/pkg/email/templates/testdata/temporary_password.body.golden.html
+++ b/pkg/email/templates/testdata/temporary_password.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">A temporary password was requested for your user "john-doe".</div>
-  <div aria-label="Temporary Password" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Temporary Password" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/user_requested.body.golden.html b/pkg/email/templates/testdata/user_requested.body.golden.html
index 93a32e4329..da2ec4c3d3 100644
--- a/pkg/email/templates/testdata/user_requested.body.golden.html
+++ b/pkg/email/templates/testdata/user_requested.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Your review is required for a newly registered user.</div>
-  <div aria-label="User Requested" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="User Requested" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>
diff --git a/pkg/email/templates/testdata/validate.body.golden.html b/pkg/email/templates/testdata/validate.body.golden.html
index 0e166cf0cc..0be1764ec0 100644
--- a/pkg/email/templates/testdata/validate.body.golden.html
+++ b/pkg/email/templates/testdata/validate.body.golden.html
@@ -40,7 +40,6 @@
       display: block;
       margin: 13px 0;
     }
-
   </style>
   
   
@@ -48,7 +47,6 @@
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
   <style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Lato);
-
   </style>
   
   <style type="text/css">
@@ -58,14 +56,12 @@
         max-width: 100%;
       }
     }
-
   </style>
   <style media="screen and (min-width:480px)">
     .moz-text-html .mj-column-per-100 {
       width: 100% !important;
       max-width: 100%;
     }
-
   </style>
   <style type="text/css">
     @media only screen and (max-width:479px) {
@@ -77,7 +73,6 @@
         width: auto !important;
       }
     }
-
   </style>
   <style type="text/css">
     code {
@@ -87,13 +82,12 @@
       background-color: #E7E7E7;
       border-radius: 6px;
     }
-
   </style>
 </head>
 
 <body style="word-spacing:normal;background-color:#E7E7E7;">
   <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Please confirm your email address for The Things Network.</div>
-  <div aria-label="Validate" aria-roledescription="email" style="background-color:#E7E7E7;" role="article" lang="und" dir="auto">
+  <div aria-label="Validate" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#E7E7E7;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
       <tbody>
         <tr>