Some tweaks for better mobile/responsive behavior.

css/converse.css

@@ -1047,11 +1047,15 @@
   display: block;
   font-size: 14px;
   height: 35px;
-  left: auto;
   position: fixed;
-  right: 15px;
+  left: 0;
+  right: 0;
   width: auto;
   z-index: 30; }
+  @media screen and (max-width: 480px) {
+    #conversejs {
+      width: 100%;
+      width: 100vw; } }
   #conversejs ::selection {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
@@ -1243,7 +1247,7 @@
   display: block;
   float: right;
   height: 35px;
-  margin: 0 7px;
+  margin: 0 0.5em;
   width: 200px; }
   @media screen and (max-width: 480px) {
     #conversejs .chatbox {
@@ -1260,7 +1264,8 @@
     @media screen and (max-width: 480px) {
       #conversejs .chatbox .box-flyout {
         height: 400px;
-        width: 100%; } }
+        width: 100%;
+        height: 88vh; } }
   #conversejs .chatbox .chat-title {
     color: white;
     line-height: 15px;
@@ -1457,7 +1462,11 @@
       left: 0; }
 
 #conversejs #controlbox {
-  display: none; }
+  display: none;
+  margin-right: 1em; }
+  @media screen and (max-width: 480px) {
+    #conversejs #controlbox {
+      margin: 0; } }
   #conversejs #controlbox .controlbox-head {
     background-color: #577BDD;
     border-top-left-radius: 4px;
@@ -1739,7 +1748,7 @@
   color: #0a0a0a;
   float: right;
   height: 100%;
-  margin: 0 7px;
+  margin: 0 0.5em;
   padding: 10px 8px 0 8px; }
   #conversejs .toggle-controlbox span {
     color: white; }
@@ -1986,7 +1995,7 @@
   float: right;
   font-weight: bold;
   height: 100%;
-  margin: 0 7px;
+  margin: 0 0.5em;
   padding: 0;
   width: 130px; }
   #conversejs #minimized-chats #toggle-minimized-chats {

sass/_chatbox.scss

@@ -73,6 +73,7 @@
             @media screen and (max-width: $mobile-landscape-length) {
                 height: $mobile-chat-height;
                 width: $mobile-chat-width;
+                height: 88vh;
             }
         }
         .chat-title {

sass/_controlbox.scss

@@ -1,6 +1,10 @@
 #conversejs {
     #controlbox {
         display: none;
+        margin-right: 2*$chat-gutter;
+        @media screen and (max-width: $mobile-landscape-length) {
+            margin: 0;
+        }
         .controlbox-head {
             background-color: $controlbox-head-color;
             border-top-left-radius: $chatbox-border-radius;

sass/_core.scss

@@ -5,11 +5,15 @@
     display: block;
     font-size: $font-size;
     height: $bottom-gutter-height;
-    left: auto;
     position: fixed;
-    right: 15px;
+    left: 0;
+    right: 0;
     width: auto;
     z-index: 30;
+    @media screen and (max-width: $mobile-landscape-length) {
+        width: 100%;
+        width: 100vw;
+    }
 
     ::selection {
         background-color: $highlight-color;

sass/_variables.scss

@@ -49,7 +49,7 @@ $legend-font-size: 16px !default;
 
 $chat-width: 200px !default;
 $chat-height: 450px !default;
-$chat-gutter: 7px !default;
+$chat-gutter: 0.5em !default;
 $minimized-chats-width: 130px !default;
 
 $mobile-chat-width: 100% !default;