Some initial work on making the UI responsive.

css/converse.css

@@ -46,6 +46,9 @@
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; }
+  @media screen and (max-width: 480px) {
+    #conversejs {
+      margin: 5px 10px; } }
   #conversejs a, #conversejs a:visited {
     text-decoration: none;
     color: #436F64;
@@ -814,12 +817,22 @@
   #conversejs .chatroom {
     height: 25px;
     float: right;
-    margin-right: 15px;
+    margin: 0 7px;
     display: block; }
+    @media screen and (max-width: 480px) {
+      #conversejs .chatbox,
+      #conversejs .chatroom {
+        margin: 0; } }
   #conversejs .chatbox {
     width: 200px; }
+    @media screen and (max-width: 480px) {
+      #conversejs .chatbox {
+        width: 100%; } }
     #conversejs .chatbox .box-flyout {
       width: 200px; }
+      @media screen and (max-width: 480px) {
+        #conversejs .chatbox .box-flyout {
+          width: 100%; } }
     #conversejs .chatbox .dropdown a {
       width: 148px;
       display: inline-block;
@@ -847,11 +860,16 @@
       padding: 4px 7px 0 5px; }
   #conversejs .chatroom {
     width: 300px; }
+    #conversejs .chatroom .box-flyout {
+      width: 300px; }
+    @media screen and (max-width: 480px) {
+      #conversejs .chatroom {
+        width: 100%; }
+        #conversejs .chatroom .box-flyout {
+          width: 100%; } }
     #conversejs .chatroom label {
       margin-left: 2px;
       font-size: 12px; }
-    #conversejs .chatroom .box-flyout {
-      width: 300px; }
     #conversejs .chatroom .participant-list {
       list-style: none; }
       #conversejs .chatroom .participant-list li {
@@ -1193,6 +1211,10 @@
     display: block;
     height: 400px;
     position: absolute; }
+    @media screen and (max-width: 480px) {
+      #conversejs .minimized-chats-flyout,
+      #conversejs .box-flyout {
+        height: 400px; } }
   #conversejs .minimized-chats-flyout {
     border-radius: 4px;
     bottom: 25px;
@@ -1219,3 +1241,5 @@
     margin-left: 0;
     cursor: n-resize;
     z-index: 20; }
+
+/*# sourceMappingURL=converse.css.map */

sass/converse.scss

@@ -50,6 +50,10 @@
     @include box-sizing(border-box);
   }
 
+  @media screen and (max-width: $mobile_landscape_length) {
+      margin: 5px 10px;
+  }
+
   a, a:visited {
     text-decoration: none;
     color: $link-color;
@@ -907,14 +911,23 @@
   .chatroom {
     height: 25px;
     float: right;
-    margin-right: 15px;
+    margin: 0 $chat-gutter;
+    @media screen and (max-width: $mobile_landscape_length) {
+        margin: 0;
+    }
     display: block;
   }
 
   .chatbox {
     width: $chat-width;
+    @media screen and (max-width: $mobile_landscape_length) {
+        width: $mobile-chat-width;
+    }
     .box-flyout {
       width: $chat-width;
+        @media screen and (max-width: $mobile_landscape_length) {
+            width: $mobile-chat-width;
+        }
     }
     .dropdown {
       a {
@@ -954,14 +967,21 @@
   }
 
   .chatroom {
-    width: 300px;
+    width: $chatroom-width;
+    .box-flyout {
+      width: $chatroom-width;
+    }
+    @media screen and (max-width: $mobile_landscape_length) {
+      width: $mobile-chat-width;
+      .box-flyout {
+        width: $mobile-chat-width;
+      }
+    }
+
     label {
       margin-left: 2px;
       font-size: 12px;
     }
-    .box-flyout {
-      width: 300px;
-    }
     .participant-list {
       list-style: none;
       li {
@@ -1438,6 +1458,9 @@
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     display: block;
     height: $chat-height;
+    @media screen and (max-width: $mobile_landscape_length) {
+      height: $mobile-chat-height;
+    }
     position: absolute;
   }
 

sass/variables.scss

@@ -22,8 +22,16 @@
   $roster-height: 194px;
   $controlbox-dropdown-height: 25px;
 
+  $mobile_landscape_length: 480px;
+
   $font-size: 14px;
   $legend-font-size: 16px;
 
+  $chatroom-width: 300px;
   $chat-width: 200px;
   $chat-height: 400px;
+  $chat-gutter: 7px;
+
+  $mobile-chat-width: 100%;
+  $mobile-chat-height: 400px;
+