Fix styles for mobile view

sass/_chatrooms.scss

@@ -300,6 +300,9 @@
                     font-size: 80%;
                 }
             }
+            .chatbox-buttons {
+                @include make-col(4);
+            }
             .chatroom-body {
                 .occupants {
                     .chatroom-features {
@@ -316,7 +319,31 @@
     }
 }
 
-/* ******************* Fullpage styles *************************** */
+#conversejs.converse-fullscreen {
+    .chatroom {
+        .box-flyout {
+            .chatbox-title {
+                @include make-col(9);
+            }
+            .chatbox-buttons {
+                @include make-col(3);
+            }
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .chatroom {
+        .box-flyout {
+            .chatbox-title {
+                @include make-col(8);
+            }
+            .chatbox-buttons {
+                @include make-col(4);
+            }
+        }
+    }
+}
 
 #conversejs.converse-fullscreen,
 #conversejs.converse-mobile {
@@ -329,7 +356,6 @@
             width: 100%;
 
             .chatbox-title {
-                @include make-col(9);
                 .chatroom-description {
                     font-size: 70%;
                 }

sass/_controlbox.scss

@@ -357,7 +357,6 @@
 
             .chatbox { 
                 .box-flyout {
-                    top: -100vh;
                     margin-left: 15px; // Counteracts Bootstrap margins, but
                                        // not clear why needed...
                     left: 0;
@@ -393,7 +392,7 @@
     }
 }
 
-#conversejs:not(.converse-fullscreen) {
+#conversejs.converse-overlayed {
     #controlbox {
         order: -1;
         min-width: $controlbox-width !important;
@@ -445,7 +444,8 @@
     }
 }
 
-#conversejs.converse-fullscreen {
+#conversejs.converse-fullscreen,
+#conversejs.converse-mobile {
     #controlbox {
         @include make-col-ready();
         @include media-breakpoint-up(md) {

sass/_core.scss

@@ -67,12 +67,16 @@ body.reset {
         }
     }
 
-    &.converse-fullscreen {
+    &.converse-fullscreen,
+    &.converse-mobile {
         .converse-chatboxes {
             width: 100vw;
             right: 15px; // Hack due to padding added by bootstrap
         }
     }
+    &.converse-overlayed {
+        height: 3em;
+    }
 
     .brand-heading {
         font-family: $heading-font; 
@@ -89,7 +93,6 @@ body.reset {
         z-index: 1031; // One more than bootstrap navbar
         position: fixed;
         bottom: 0;
-        height: 3em;
         right: 0;
     }
 

src/converse-chatboxes.js

@@ -722,9 +722,6 @@
                                 _converse.root.appendChild(el);
                             }
                         }
-                        if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) {
-                            el.classList.add('fullscreen');
-                        }
                         el.innerHTML = '';
                         this.setElement(el, false);
                     } else {