Contact name now overflows into ellipsis

index.html

@@ -70,7 +70,7 @@
         <script type='text/x-tmpl-mustache' id='contact'>
             <div class='avatar' style='background-image: url({{ contact_avatar }});'></div>
             <div class='contact-details'>
-                <h3>
+                <h3 class='contact-name'>
                 {{ contact_name }}
                 </h3>
                 <p class='last-message'>

stylesheets/manifest.css

@@ -152,6 +152,11 @@ body {
       .gutter .contact .contact-details h3 {
         font-size: 13px;
         margin-bottom: 4px; }
+      .gutter .contact .contact-details .contact-name {
+        width: 105px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis; }
       .gutter .contact .contact-details .last-message {
         color: #999999;
         letter-spacing: 0.15px;

stylesheets/view/_gutter.scss

@@ -87,6 +87,12 @@
           font-size:13px;
           margin-bottom:4px;
         }
+        .contact-name {
+          width: 105px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
         .last-message {
           color:lighten(#333, 40%);
           letter-spacing:0.15px;