Respect linebreaks in templates

If a user puts a linebreak in an SMS template then the recipient will
see these linebreaks on their phone. So when we show a preview of an SMS
template, it should have linebreaks in it.

app/assets/stylesheets/components/sms-message.scss

@@ -1,5 +1,6 @@
 %sms-message-wrapper,
 .sms-message-wrapper {
+
   width: 100%;
   box-sizing: border-box;
   padding: $gutter-half;
@@ -9,6 +10,15 @@
   white-space: normal;
   margin: 0 0 $gutter 0;
   clear: both;
+
+  p {
+    margin: 0;
+  }
+
+  p + p {
+    margin-top: 20px;
+  }
+
 }
 
 .sms-message-wrapper-with-radio {

app/templates/components/sms-message.html

@@ -16,7 +16,7 @@
         {{ from }}
       </span>
     {% endif %}
-    {{ body }}
+    {{ body|nl2br }}
   </div>
   {% if recipient %}
     <p class="sms-message-recipient">