Fix wrapping and truncation issues in chat head.

css/converse.css

@@ -1225,7 +1225,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     margin: 0;
-    margin-top: 0.3em; }
+    padding-top: 0.2em; }
 #conversejs .chatbox-btn {
   border-radius: 50%;
   border: 1px solid white;
@@ -1264,11 +1264,13 @@
   #conversejs .chatbox .chat-title {
     color: white;
     line-height: 15px;
-    display: block; }
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: 2em; }
     #conversejs .chatbox .chat-title a {
       color: white;
-      width: 100%;
-      word-wrap: break-word; }
+      width: 100%; }
   #conversejs .chatbox .chat-body {
     background-color: white;
     border-bottom-left-radius: 4px;

sass/_chatbox.scss

@@ -32,7 +32,7 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             margin: 0;
-            margin-top: 0.3em;
+            padding-top: 0.2em;
         }
     }
     .chatbox-btn {
@@ -77,10 +77,12 @@
             color: $chat-head-text-color;
             line-height: 15px;
             display: block;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            height: 2em;
             a {
                 color: $chat-head-text-color;
                 width: 100%;
-                word-wrap: break-word;
             }
         }
         .chat-body {