Vertically center contact names

For contacts/conversations without any messages, center their names
vertically in the conversation list element.

// FREEBIE

background.html

@@ -181,7 +181,9 @@
           {{ #unreadCount }}
             <span class='unread-count'>{{ unreadCount }}</span>
           {{ /unreadCount }}
+          {{ #last_message }}
             <p class='last-message'> {{ last_message }} </p>
+          {{ /last_message }}
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='phone-number'>

stylesheets/_global.scss

@@ -318,9 +318,9 @@ $avatar-size: 44px;
   .contact-details {
     $left-margin: 8px;
 
-    vertical-align: top;
+    vertical-align: middle;
     display: inline-block;
-    margin: 4px 0 0 $left-margin;
+    margin: 0 0 0 $left-margin;
     width: calc(100% - #{$avatar-size} - #{$left-margin});
 
     p {

stylesheets/_index.scss

@@ -159,7 +159,7 @@ input.search {
   }
 
   .last-message {
-    margin: 6px 0;
+    margin: 6px 0 0;
     font-size: small;
     font-weight: 300;
   }

stylesheets/manifest.css

@@ -261,9 +261,9 @@ img.emoji {
   .contact:last-child::after {
     display: none; }
   .contact .contact-details {
-    vertical-align: top;
+    vertical-align: middle;
     display: inline-block;
-    margin: 4px 0 0 8px;
+    margin: 0 0 0 8px;
     width: calc(100% - 44px - 8px); }
     .contact .contact-details p {
       overflow-x: hidden;
@@ -552,7 +552,7 @@ input.search {
     display: none;
     padding: 0.5em; }
   .index .last-message {
-    margin: 6px 0;
+    margin: 6px 0 0;
     font-size: small;
     font-weight: 300; }
   .index .gutter .timestamp {