Give the controlbox full height.

css/converse.css

@@ -1805,17 +1805,18 @@
       left: 0; }
 
 #conversejs #controlbox {
-  margin-right: 1em; }
-  @media screen and (max-width: 480px) {
-    #conversejs #controlbox {
-      margin: 0; } }
-  @media screen and (max-height: 450px) {
-    #conversejs #controlbox {
-      margin: 0; } }
+  width: 300px;
+  margin-right: 0;
+  height: 100vh; }
+  #conversejs #controlbox .box-flyout {
+    box-shadow: 0 0.3em 0.8em 0.8em rgba(0, 0, 0, 0.4);
+    width: 300px;
+    bottom: 0;
+    height: 100vh; }
   #conversejs #controlbox .controlbox-head {
     background-color: #577BDD;
     border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+    border-top-right-radius: 0;
     color: white;
     height: 55px;
     margin: 0;
@@ -2049,7 +2050,7 @@
   #conversejs #controlbox .controlbox-pane {
     background-color: white;
     border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-bottom-right-radius: 0;
     border: 0;
     font-size: 14px;
     position: absolute;

sass/_controlbox.scss

 #conversejs {
     #controlbox {
-        margin-right: 2*$chat-gutter;
-        @media screen and (max-width: $mobile-portrait-length) {
-            margin: 0;
-        }
-        @media screen and (max-height: $mobile-landscape-height) {
-            margin: 0;
+        width: $controlbox-width;
+        margin-right: 0;
+        height: 100vh;
+        .box-flyout {
+            box-shadow: 0 0.3em 0.8em 0.8em rgba(0, 0, 0, 0.4);
+            width: $controlbox-width;
+            bottom: 0;
+            height: 100vh;
         }
         .controlbox-head {
             background-color: $controlbox-head-color;
             border-top-left-radius: $chatbox-border-radius;
-            border-top-right-radius: $chatbox-border-radius;
+            border-top-right-radius: 0;
             @media screen and (max-height: $mobile-landscape-height) {
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
@@ -325,7 +327,7 @@
         .controlbox-pane {
             background-color: white;
             border-bottom-left-radius: $chatbox-border-radius;
-            border-bottom-right-radius: $chatbox-border-radius;
+            border-bottom-right-radius: 0;
             border: 0;
             font-size: $font-size;
             position: absolute;

sass/_variables.scss

@@ -59,6 +59,7 @@ $legend-font-size: 16px !default;
 
 $line-height:  16px !default;
 
+$controlbox-width: 300px !default;
 $chat-width: 200px !default;
 $chat-height: 450px !default;
 $chat-gutter: 0.5em !default;