Restrict letter previews to their folded height

The letter previews take up too much space on the page (more than a
typical email or text message). This means that users have to scroll too
much.

When we send the real letters they will be folded in half to fit in the
envelope.

So by showing the letter previews on the page cropped to half the
letter’s height:
- it reduces the need for scrolling
- it gives an accurate preview of how the letter will be delivered

This is acheived without hard-coding any heights by using a little-known
quirk of CSS, namely that padding set as a percentage is calculated from
the width of the element, even for top/bottom padding. This means that
we can always set the ratio of the displayed letter to be A4 folded in
half – the square root of 2.

app/assets/stylesheets/components/letter.scss

@@ -11,6 +11,8 @@ $outline-width: 5px;
   outline: $outline-width solid rgba($text-colour, 0.1);
   padding: 0;
   margin: $outline-width $outline-width $gutter;
+  height: 50%;
+  overflow: hidden;
 
   a {
     display: block;