Merge pull request #287 from supertokens/email-template-superhuman

rishabhpoddar · web-flow · commit 6d768fc45369 · 2023-06-07T13:54:11.000+05:30
feat: email templates updated
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixes
 
+- Update email templates to fix an issue with styling on some email clients
 - Fixes an issue where session verification would fail when using JWTs created by the JWT recipe (and not the session recipe)
 
 ## [0.12.6] - 2023-06-01
diff --git a/recipe/emailverification/emaildelivery/smtpService/emailVerify.go b/recipe/emailverification/emaildelivery/smtpService/emailVerify.go
@@ -34,6 +34,10 @@ const emailVerificationTemplate = `<!doctype html>
     <title>*|MC:SUBJECT|*</title>
 
     <style type="text/css">
+		body {
+			max-width: 100vw;
+			overflow: hidden;
+		}
         p {
             margin: 10px 0;
             padding: 0;
@@ -782,6 +786,11 @@ const emailVerificationTemplate = `<!doctype html>
             }
 
         }
+		@media only screen and (max-width: 480px) {
+			#meant-for {
+				padding: 20px;
+			}
+		}
     </style>
 </head>
 
@@ -901,6 +910,7 @@ const emailVerificationTemplate = `<!doctype html>
 
 
                                                             <p
+																id="meant-for"
                                                                 style="font-family: 'Helvetica', sans-serif; font-size: 16px; line-height: 26px; font-weight:400; text-align: center; color: #808080">
                                                                 This email is meant for <a
                                                                     style="font-family: 'Helvetica', sans-serif; text-align: center; word-break: break-all; font-weight: 400; font-size: 16px; line-height: 26px; color: #808080 !important;"
diff --git a/recipe/passwordless/emaildelivery/smtpService/passwordlessLogin.go b/recipe/passwordless/emaildelivery/smtpService/passwordlessLogin.go
@@ -34,6 +34,10 @@ const magicLinkAndOtpLoginTemplate = `<!doctype html>
 	<title>*|MC:SUBJECT|*</title>
 
 	<style type="text/css">
+		body {
+			max-width: 100vw;
+			overflow: hidden;
+		}
 		p {
 			margin: 10px 0;
 			padding: 0;
@@ -1013,6 +1017,10 @@ const magicLinkLoginTemplate = `<!doctype html>
 	<title>*|MC:SUBJECT|*</title>
 
 	<style type="text/css">
+		body {
+			max-width: 100vw;
+			overflow: hidden;
+		}
 		p {
 			margin: 10px 0;
 			padding: 0;
@@ -1931,6 +1939,10 @@ const otpLoginTemplate = `<!doctype html>
 	<title>*|MC:SUBJECT|*</title>
 
 	<style type="text/css">
+		body {
+			max-width: 100vw;
+			overflow: hidden;
+		}
 		p {
 			margin: 10px 0;
 			padding: 0;
