Increase width of edit letter textbox

The textbox we use for editing letters is the same size as that for
email and text messages.

This is problematic because:
- it feels quite cramped – letters will often be longer than emails or
  text messages
- it has a narrower line length than the printed letters (which is a
  constant, unlike for emails and text messages)

The printed letters have a line length of 137.5mm and a font size of
12.5pt.

137.5mm = 5.41 inches = 389.7pt line length

389.7pt/12.5pt = 31.8em

So we could make the box 31.8em wide, but then it wouldn’t align to our
grid.

Our grid splits the page into quarters initially because this is how
wide the navigation is. So this means that we can use grid units of
1/multiples of four, eg 1/4, 1/8, 1/12, 1/16, etc. But the smaller the
denominator, the less effective the grid will be – it gets closer to no
grid at all.

After having a play around, 5/8 of the page looks closest to 31.8em.
Since the main column of the page is 3/4, we set a column of 5/6 width
inside that, which equals 5/8 of the total page.

app/assets/stylesheets/_grids.scss

@@ -18,6 +18,10 @@
   @include grid-column(1/8);
 }
 
+.column-five-eighths {
+  @include grid-column(5/8);
+}
+
 .column-seven-eighths {
   @include grid-column(7/8);
 }

app/templates/views/edit-letter-template.html

@@ -14,11 +14,9 @@
 
     <form method="post">
       <div class="grid-row">
-        <div class="column-three-quarters">
+        <div class="column-five-sixths">
           {{ textbox(form.name, width='1-1', hint='Your recipients won’t see this', rows=10) }}
           {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
-        </div>
-        <div class="column-three-quarters">
           {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
           {{ page_footer(
             'Save',