jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix HTML email template for mobile rendering
All checks were successful
deploy / deploy (push) Successful in 1m45s
Details

Browse Source 
Add text-size-adjust, word-break, responsive media query, MSO
conditionals, and proper table attributes so emails render at
full size with correct wrapping on mobile clients.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-28 23:39:48 +00:00
parent 199f0b506f
commit c71d08bb5c
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
lib/berrypod/newsletter/notifier.ex
View File

@ -138,29 +138,46 @@ defmodule Berrypod.Newsletter.Notifier do
"""
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title>#{esc(shop_name)}</title>
<style>
body, table, td { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
a { word-break: break-all; }
@media only screen and (max-width: 620px) {
.email-container { width: 100% !important; }
.email-padding { padding: 16px !important; }
.email-header { padding: 16px 16px 12px !important; }
}
</style>
<!--[if mso]>
<style>body { font-family: Arial, sans-serif; }</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<table role="presentation" width="100%" style="background-color: #f3f4f6;">
<body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; word-break: break-word;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f3f4f6;">
<tr>
<td align="center" style="padding: 32px 16px;">
<table role="presentation" width="100%" style="max-width: 560px; background-color: #ffffff; border-radius: 8px; overflow: hidden;">
<!--[if mso]><table role="presentation" width="560" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<table role="presentation" class="email-container" width="560" cellpadding="0" cellspacing="0" style="max-width: 560px; width: 100%; background-color: #ffffff; border-radius: 8px;">
<tr>
<td style="padding: 24px 32px 16px; border-bottom: 1px solid #e5e7eb;">
<td class="email-header" style="padding: 24px 32px 16px; border-bottom: 1px solid #e5e7eb;">
<strong style="font-size: 18px; color: #111827;">#{esc(shop_name)}</strong>
</td>
</tr>
<tr>
<td style="padding: 24px 32px 32px; color: #374151; font-size: 16px; line-height: 1.6;">
<td class="email-padding" style="padding: 24px 32px 32px; color: #374151; font-size: 16px; line-height: 1.6;">
#{content}
#{footer}
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>