Fix overlapping name and timestamp

In the conversation list, fix long conversation names overlapping with
the right-floated timestamps.

// FREEBIE

background.html

@@ -121,8 +121,8 @@
   <script type='text/x-tmpl-mustache' id='conversation-preview'>
       {{> avatar }}
       <div class='contact-details'>
-          {{> contact_name_and_number }}
           <span class='last-timestamp'> {{ last_message_timestamp }} </span>
+          {{> contact_name_and_number }}
           <p class='last-message'> {{ last_message }} </p>
       </div>
   </script>

stylesheets/_global.scss

@@ -302,12 +302,12 @@ $avatar-size: 44px;
   }
 
   .name {
+    display: block;
     margin: 0;
     font-size: 1em;
     font-weight: 400;
     text-overflow: ellipsis;
     overflow-x: hidden;
-    display: inline-block;
   }
 
   .number {

stylesheets/_index.scss

@@ -121,7 +121,7 @@ input.search {
 .last-timestamp {
   font-size: smaller;
   float: right;
-  margin-right: 10px;
+  margin: 0 10px;
 }
 
 .new-contact {

stylesheets/manifest.css

@@ -243,12 +243,12 @@ img.emoji {
       overflow-x: hidden;
       text-overflow: ellipsis; }
   .contact .name {
+    display: block;
     margin: 0;
     font-size: 1em;
     font-weight: 400;
     text-overflow: ellipsis;
-    overflow-x: hidden;
-    display: inline-block; }
+    overflow-x: hidden; }
   .contact .number {
     color: #616161;
     font-size: small; }
@@ -491,7 +491,7 @@ input.search {
 .last-timestamp {
   font-size: smaller;
   float: right;
-  margin-right: 10px; }
+  margin: 0 10px; }
 
 .new-contact {
   display: none;