Make click areas bigger on template picker

Generally, bigger click areas are better[1], as long as they don’t cause
ambiguity.

This commit expands the clickable area of links to templates to include
hint text underneath which states the type of template.

1. https://en.wikipedia.org/wiki/Fitts%27s_law

app/assets/stylesheets/components/message.scss

@@ -3,6 +3,19 @@
   &-name {
     @include bold-24;
     margin: 20px 0 5px 0;
+
+    a {
+      display: block;
+      margin-bottom: -$gutter;
+      padding-bottom: $gutter;
+    }
+
+  }
+
+  &-type {
+    color: $secondary-text-colour;
+    margin-bottom: $gutter / 3;
+    pointer-events: none;
   }
 
   &-updated-at {

app/templates/views/templates/choose.html

@@ -64,7 +64,7 @@
           <h2 class="message-name">
             <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=template.id) }}">{{ template.name }}</a>
           </h2>
-          <p class="hint bottom-gutter-1-3">
+          <p class="message-type">
             {{ message_count_label(1, template.template_type, suffix='')|capitalize }} template
           </p>
         </div>