Fix #953 -- Render markdown in email text previews

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -133,16 +133,18 @@ div[data-formset-body], div[data-formset-form], div[data-nested-formset-form], d
   line-height: 30px;
 }
 
-pre.mail-preview {
-  white-space: pre-line;       /* Since CSS 2.1 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+div.mail-preview {
+  border: 1px solid #ccc;
+  border-top-width: 1px;
+  border-radius: 3px;
 }
 
-.mail-preview-group pre[lang] {
+.mail-preview-group div[lang] {
   @include border-top-radius(0px);
   @include border-bottom-radius(0px);
   border-top-width: 0;
   margin-bottom: 0;
+  padding: 15px;
 
   &:first-child {
     @include border-top-radius($input-border-radius);
@@ -152,6 +154,32 @@ pre.mail-preview {
     @include border-bottom-radius($input-border-radius);
     margin-bottom: 20px;
   }
+  h2, h3 {
+    margin-bottom: 20px;
+    margin-top: 10px;
+  }
+  p {
+    margin: 0 0 10px;
+
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    -ms-word-break: break-all;
+    /* This is the dangerous one in WebKit, as it breaks things wherever */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
+
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .search-line {