Smaller width for trimmed chats

css/converse.css

@@ -589,6 +589,7 @@ span.spinner.hor_centered {
   margin: 0 0 2px 2px;
   box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
   height: 24px;
+  width: 130px;
 }
 #conversejs #trimmed-chatboxes .chat-head-chatroom {
   width: 100px;

less/converse.less

@@ -621,6 +621,7 @@ span.spinner.hor_centered {
     margin: 0 0 2px 2px;
     box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
     height: 24px;
+    width: 130px;
 }
 
 #conversejs #trimmed-chatboxes .chat-head-chatroom {

mockup/index.html

@@ -391,8 +391,81 @@
                 <a class="close-chatbox-button icon-close"></a>
                 <div class="chat-title"> My Chatroom</div>
             </div>
+            
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Annegreet Gomez
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Asmaa Haakman
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Candice van der Knijff
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Felix Amsel
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Irini Vlastuin
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Laura Grunewald
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Lena Grunewald
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Mandy Seiler
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Marcel Eberhardt
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Max Frankfurter
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Nuriye Cuypers
+                </a>
+            </div>
+            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-title">
+                <a href="#" class="restore-chat">
+                    Rinse Sommer
+                </a>
+            </div>
         </div>
-    </div>
+    </div></div>
 
 </div>