From 4970cbeaed8c5d6e511427a6ceb848dd6da270de Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 23 Oct 2015 15:47:32 -0700
Subject: [PATCH] Fix overlapping name and timestamp

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

// FREEBIE
---
 background.html          | 2 +-
 stylesheets/_global.scss | 2 +-
 stylesheets/_index.scss  | 2 +-
 stylesheets/manifest.css | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/background.html b/background.html
index 1ee6017e..799c6af3 100644
--- a/background.html
+++ b/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>
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 387087b5..cce0090c 100644
--- a/stylesheets/_global.scss
+++ b/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 {
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 8d0e06cd..1f6ae296 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -121,7 +121,7 @@ input.search {
 .last-timestamp {
   font-size: smaller;
   float: right;
-  margin-right: 10px;
+  margin: 0 10px;
 }
 
 .new-contact {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 41094b3e..dc739fcd 100644
--- a/stylesheets/manifest.css
+++ b/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;