Fix width issue for chatrooms in responsive/mobile view.

css/converse.css

@@ -1883,13 +1883,15 @@
   width: 300px; }
   @media screen and (max-width: 480px) {
     #conversejs .chatroom {
-      width: 100%; }
-      #conversejs .chatroom .box-flyout {
-        min-width: 100%;
-        width: 100%; } }
+      width: 100%; } }
   #conversejs .chatroom .box-flyout {
     min-width: 300px;
     width: 300px; }
+    @media screen and (max-width: 480px) {
+      #conversejs .chatroom .box-flyout {
+        height: 400px;
+        width: 100%;
+        height: 99vh; } }
     #conversejs .chatroom .box-flyout .chatroom-body {
       height: 289px;
       border-bottom-left-radius: 4px;

sass/_chatrooms.scss

@@ -19,14 +19,15 @@
         width: $chatroom-width;
         @media screen and (max-width: $mobile-landscape-length) {
             width: $mobile-chat-width;
-            .box-flyout {
-                min-width: $mobile-chat-width;
-                width: $mobile-chat-width;
-            }
         }
         .box-flyout {
             min-width: $chatroom-width;
             width: $chatroom-width;
+            @media screen and (max-width: $mobile-landscape-length) {
+                height: $mobile-chat-height;
+                width: $mobile-chat-width;
+                height: 99vh;
+            }
             .chatroom-body {
                 height: 289px;
                 @include border-bottom-radius($chatbox-border-radius);