Style tweaks

Truncate pending contacts with too long names
Position accept/decline buttons below pending contact's name

converse.css

@@ -374,16 +374,24 @@ form.search-xmpp-contact input {
     margin-left: 0.5em;
 }
 
-#xmppchat-roster dd a {
-    margin-left: 1.5em;
+#xmppchat-roster dd a,
+#xmppchat-roster dd span {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
     display: inline-block;
-    width: 113px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
+#xmppchat-roster dd a {
+    margin-left: 1.5em;
+    width: 113px;
+}
+
+#xmppchat-roster dd span {
+    width: 125px;
+}
+
 .remove-xmpp-contact-dialog .ui-dialog-buttonpane {
     border: none;
 }

converse.js

@@ -1198,10 +1198,10 @@
                     '<a class="remove-xmpp-contact" title="Click to remove this contact" href="#"></a>'),
 
         pending_template: _.template(
-                    '{{ fullname }}' +
+                    '<span>{{ fullname }}</span>' +
                     '<a class="remove-xmpp-contact" title="Click to remove this contact" href="#"></a>'),
 
-        request_template: _.template('{{ fullname }}' +
+        request_template: _.template('<div>{{ fullname }}</div>' +
                     '<button type="button" class="accept-xmpp-request">' +
                     'Accept</button>' +
                     '<button type="button" class="decline-xmpp-request">' +