Fix the width for roster entries.

css/converse.css

@@ -1232,8 +1232,9 @@
   display: inline-block;
   float: right;
   font-size: 9px;
-  margin: 0 0.2em;
-  padding: 0.5em;
+  margin: 0;
+  margin-right: 0.2em;
+  padding: 0.5em 0.5em 0.3em 0.5em;
   text-decoration: none; }
   #conversejs .chatbox-btn:active {
     position: relative;
@@ -1801,8 +1802,12 @@
       display: block;
       height: 24px;
       overflow-y: hidden;
-      padding: 0.3em 1em;
-      text-shadow: 0 1px 0 #FAFAFA; }
+      padding: 0.3em 0 0.3em 1em;
+      text-shadow: 0 1px 0 #FAFAFA;
+      line-height: 14px;
+      width: 100%; }
+      #conversejs #converse-roster .roster-contacts dd .open-chat {
+        max-width: 90%; }
       #conversejs #converse-roster .roster-contacts dd:hover {
         background-color: #DCF9F6; }
         #conversejs #converse-roster .roster-contacts dd:hover .remove-xmpp-contact {
@@ -1836,8 +1841,7 @@
         margin-left: 5px; }
       #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
         float: right;
-        width: 22px;
-        margin: 0;
+        margin-right: 1em;
         display: none;
         color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {

sass/_chatbox.scss

@@ -43,8 +43,9 @@
         display: inline-block;
         float: right;
         font-size: $box-close-font-size;
-        margin: 0 0.2em;
-        padding: 0.5em;
+        margin: 0;
+        margin-right: 0.2em;
+        padding: 0.5em 0.5em 0.3em 0.5em;
         text-decoration: none;
         &:active {
             position: relative;

sass/_roster.scss

@@ -83,8 +83,13 @@
             display: block;
             height: 24px;
             overflow-y: hidden;
-            padding: 0.3em 1em;
+            padding: 0.3em 0 0.3em 1em;
             text-shadow: 0 1px 0 $text-shadow-color;
+            line-height: $font-size;
+            width: 100%;
+            .open-chat {
+                max-width: 90%;
+            }
             &:hover {
                 background-color: $highlight-color;
                 .remove-xmpp-contact {
@@ -131,8 +136,7 @@
                 }
                 &.remove-xmpp-contact {
                     float: right;
-                    width: 22px;
-                    margin: 0;
+                    margin-right: 1em;
                     display: none;
                     color: $text-color;
                 }