Edge-to-edge email content on narrow screens

The 5px cellpadding on the wrapper table was resulting in 15px of white
space either side of emails when viewed on narrow screens. Which, on a
window that could be as narrow as 320px, is a lot of wasted space!

We only wanted the 15px of horizontal padding to be removed from the
sides of the "main" content, leaving the top and bottom "hints" with
some padding so that their text doesn’t crash up against the edge of
the window on narrow screens.

The easiest way to achieve this was to split the top and bottom "hints"
out into their own slightly wider tables, with built-in cell padding.

To make things simpler, the min- and max-widths are now stored in
variables, and the changes also meant we could simplify the media
queries controlling mobile breakpoints in modern email clients.

Fixes #1928.

5 files changed, 46 insertions, 31 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6bced606..15da61f35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
     - Front end improvements:
         - Improve questionnaire process. #1939 #1998
         - Increase size of "sub map links" (hide pins, permalink, etc) #2003
+        - Edge-to-edge email layout on narrow screens #2010
     - Bugfixes:
         - Stop asset layers obscuring marker layer. #1999
         - Don't delete hidden field values when inspecting reports. #1999
diff --git a/templates/email/default/_email_bottom.html b/templates/email/default/_email_bottom.html
index 76e381201..0b2c0b697 100644
--- a/templates/email/default/_email_bottom.html
+++ b/templates/email/default/_email_bottom.html
@@ -1,17 +1,21 @@
           </tr>
-          <tr>
-            <th colspan="[% email_columns %]" style="[% td_style %][% hint_style %]" class="hint">
-              [%~ IF email_footer %]
-                [% email_footer %]
-              [%~ ELSE %]
-                This email was sent automatically, from an unmonitored email account. Please do not reply to it.
-              [%~ END %]
-            </th>
-          </tr>
         </table>
       </th>
       <th></th>
     </tr>
   </table>
+  <table [% wrapper_table %] style="[% wrapper_style %]">
+    <tr>
+      <th></th>
+      <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint">
+        [%~ IF email_footer %]
+          [% email_footer %]
+        [%~ ELSE %]
+          This email was sent automatically, from an unmonitored email account. Please do not reply to it.
+        [%~ END %]
+      </th>
+      <th></th>
+    </tr>
+  </table>
 </body>
 </html>
diff --git a/templates/email/default/_email_settings.html b/templates/email/default/_email_settings.html
index 54abc2b50..f6db8334c 100644
--- a/templates/email/default/_email_settings.html
+++ b/templates/email/default/_email_settings.html
@@ -60,7 +60,7 @@ button_font_weight = "bold"
 # Variables used inside the email templates.
 
 table_reset = 'cellspacing="0" cellpadding="0" border="0" width="100%"'
-wrapper_table = 'cellspacing="0" cellpadding="5" border="0" width="100%"'
+wrapper_table = table_reset
 
 link_style = "color: $link_text_color;"
 link_hover_style = "text-decoration: none; color: $link_hover_text_color;"
@@ -70,7 +70,12 @@ td_style = "font-family: $body_font_family; font-size: 16px; line-height: 21px;
 body_style = "margin: 0;"
 wrapper_style = "$td_style background: $body_background_color; color: $body_text_color;"
 
-hint_style = "padding: ${ column_padding }px 0; color: $body_text_color; font-size: 12px; line-height: 18px;"
+wrapper_max_width = 620 # in pixels without "px" suffix
+wrapper_min_width = 520 # in pixels without "px" suffix
+
+hint_min_width = wrapper_min_width - (column_padding * 2)
+hint_style = "min-width: ${ hint_min_width }px; padding: ${ column_padding }px; color: $body_text_color; font-size: 12px; line-height: 18px;"
+
 header_style = "padding: $header_padding; background: $header_background_color; color: $header_text_color;"
 
 only_column_style = "padding: ${ column_padding }px; vertical-align: top; background-color: $primary_column_background_color; color: $primary_column_text_color;"
diff --git a/templates/email/default/_email_top.html b/templates/email/default/_email_top.html
index 102e23e59..d9e3becf2 100644
--- a/templates/email/default/_email_top.html
+++ b/templates/email/default/_email_top.html
@@ -22,14 +22,11 @@
     font-family: [% body_font_family %] !important;
   }
 
-  [%~ # 550px = 5+5+5+520+5+5+5 %]
-  @media only screen and (max-width: 549px) {
-    #main {
+  @media only screen and (max-width: [% wrapper_min_width - 1 %]px) {
+    #main, .hint {
       min-width: 0 !important;
     }
-  }
 
-  @media only screen and (max-width: 500px) {
     #main table, #main tr, #main th {
       display: block !important;
     }
@@ -45,14 +42,18 @@
   <table [% wrapper_table %] style="[% wrapper_style %]">
     <tr>
       <th></th>
-      <th width="620" style="[% td_style %] min-width: 520px;" id="main">
+      <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint">
+        [% email_summary %]
+      </th>
+      <th></th>
+    </tr>
+  </table>
+  <table [% wrapper_table %] style="[% wrapper_style %]">
+    <tr>
+      <th></th>
+      <th width="[% wrapper_max_width %]" style="[% td_style %] min-width: [% wrapper_min_width %]px;" id="main">
         <table [% table_reset %]>
           <tr>
-            <th colspan="[% email_columns %]" style="[% td_style %][% hint_style %]" class="hint">
-              [% email_summary %]
-            </th>
-          </tr>
-          <tr>
             <th colspan="[% email_columns %]" style="[% td_style %][% header_style %]">
               [%~ IF file_exists("web/cobrands/${ img_dir }/images/email-logo.gif") ~%]
                 <img src="[% inline_image('web/cobrands/' _ img_dir _ '/images/email-logo.gif') %]" width="[% logo_width %]" height="[% logo_height %]" alt="[% site_name %]" style="[% logo_style %]"/>
diff --git a/templates/email/fixamingata/_email_bottom.html b/templates/email/fixamingata/_email_bottom.html
index dab4486cd..0a8c95c1c 100644
--- a/templates/email/fixamingata/_email_bottom.html
+++ b/templates/email/fixamingata/_email_bottom.html
@@ -1,17 +1,21 @@
           </tr>
-          <tr>
-            <th colspan="[% email_columns %]" style="[% td_style %][% hint_style %]" class="hint">
-              [%~ IF email_footer %]
-                [% email_footer %]
-              [%~ ELSE %]
-                Det går inte att svara på detta mail
-              [%~ END %]
-            </th>
-          </tr>
         </table>
       </th>
       <th></th>
     </tr>
   </table>
+  <table [% wrapper_table %] style="[% wrapper_style %]">
+    <tr>
+      <th></th>
+      <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint">
+        [%~ IF email_footer %]
+          [% email_footer %]
+        [%~ ELSE %]
+          Det går inte att svara på detta mail
+        [%~ END %]
+      </th>
+      <th></th>
+    </tr>
+  </table>
 </body>
 </html>