From e0e3b6fbb26e1b522e991821124be63a5024e4ef Mon Sep 17 00:00:00 2001
From: cocide <andy@cocide.com>
Date: Fri, 5 Mar 2021 10:44:14 -0600
Subject: [PATCH] Added formatting on ping.body in emails

Not all email clients are formatting the `ping.body` contents uniformly. Even using different applications from the same email provider results in a different display of the `ping.body` contents. There are two basic issues:
* Not all email clients are honoring the fixed-width font that should be used inside `<pre>` tags. Using fixed-width font is listed in the definition on https://www.w3schools.com/tags/tag_pre.asp
* Not all email clients are displaying the text with a 1em line height. This was a recent change to the healthchecks WebUI in 9fd9c8e4efd0c87c015215ae56eada88a7d07b6b but is not part of the definition of the `<pre>` tag. I'd like to add this to the emails to make Healthchecks more uniform between the website and the email notification.

Gmail Webmail:
- [x] Is using fixed-width font
- [ ] Line height is set by the webmail client to 18px
Gmail Android App:
- [ ] Text is not fixed-width
- [ ] Line height has extra padding

ProtonMail Webmail:
- [x] Is using fixed-width font
- [x] Line height is correct
ProtonMail Android:
- [ ] Text is not fixed width
- [ ] Line height has extra padding

The testing I performed is not extensive, but it does show how multiple clients are displaying the contents differently. To make the display of the `ping.body` more uniform I'd like to add a bit of formatting information to the `<pre>` tag.
---
 templates/emails/alert-body-html.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/emails/alert-body-html.html b/templates/emails/alert-body-html.html
index 056deffa..52df4179 100644
--- a/templates/emails/alert-body-html.html
+++ b/templates/emails/alert-body-html.html
@@ -98,7 +98,7 @@
 
 {% if ping and ping.body %}
 <p><b>Last Ping Body</b></p>
-<pre>{{ ping.body|slice:":10000"|linebreaksbr }}{% if ping.body|length > 10000 %} [truncated]{% endif %}</pre>
+<pre style="font-family: monospace; line-height: 1em;">{{ ping.body|slice:":10000"|linebreaksbr }}{% if ping.body|length > 10000 %} [truncated]{% endif %}</pre>
 {% endif %}
 
 {% if projects %}