Update css for mobile view of overlay mode.

css/converse.css

@@ -5692,6 +5692,7 @@ body.reset {
     #conversejs #controlbox .add-xmpp-contact button {
       width: 100%; }
 #conversejs .toggle-controlbox {
+  text-align: center;
   background-color: #578EA9;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
@@ -5703,21 +5704,35 @@ body.reset {
   #conversejs .toggle-controlbox span {
     color: white; }
 
-@media screen and (max-width: 767px) {
-  #conversejs #controlbox .box-flyout {
-    width: 100%;
-    left: 0; }
-  #conversejs #controlbox .sidebar {
-    display: block; }
-  #conversejs #controlbox .controlbox-pane {
-    position: absolute;
-    top: 0;
-    display: none;
-    width: 100%; }
-  #conversejs.sidebar-open .chatbox:not(#controlbox) {
-    display: none; }
-  #conversejs.sidebar-open #controlbox .controlbox-pane {
-    display: block; } }
+@media (max-width: 767.98px) {
+  #conversejs {
+    left: 0;
+    right: 0;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right); }
+    #conversejs .converse-chatboxes {
+      margin: 0 !important;
+      flex-direction: row !important;
+      justify-content: space-between; }
+      #conversejs .converse-chatboxes .converse-chatroom {
+        font-size: 14px; }
+      #conversejs .converse-chatboxes .chatbox .box-flyout {
+        left: 0;
+        bottom: 0;
+        border-radius: 0;
+        width: 100vw !important;
+        height: 100vh !important; }
+      #conversejs .converse-chatboxes #controlbox {
+        order: 0; }
+        #conversejs .converse-chatboxes #controlbox .box-flyout {
+          width: 100vw !important;
+          height: 100vh !important; }
+        #conversejs .converse-chatboxes #controlbox .sidebar {
+          display: block; }
+      #conversejs .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
+        display: none; }
+      #conversejs .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
+        display: block; } }
 #conversejs:not(.fullscreen) #controlbox {
   order: -1;
   min-width: 250px !important;
@@ -5884,9 +5899,6 @@ body.reset {
     line-height: 16px;
     width: 100%; }
 
-#converse-embedded-chat .new-chatroom-nick,
-#conversejs .new-chatroom-nick {
-  margin: 1em auto; }
 #converse-embedded-chat .add-chatroom input[type="submit"],
 #converse-embedded-chat .add-chatroom input[type="button"],
 #conversejs .add-chatroom input[type="submit"],
@@ -6138,11 +6150,14 @@ body.reset {
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
           font-size: 90%;
           color: #A53214; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
-        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
-        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
-          display: block; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
+          margin-top: 2em; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
+            display: block; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],

css/inverse.css

@@ -5762,6 +5762,7 @@ body {
     #conversejs #controlbox .add-xmpp-contact button {
       width: 100%; }
 #conversejs .toggle-controlbox {
+  text-align: center;
   background-color: #578EA9;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
@@ -5773,21 +5774,35 @@ body {
   #conversejs .toggle-controlbox span {
     color: white; }
 
-@media screen and (max-width: 767px) {
-  #conversejs #controlbox .box-flyout {
-    width: 100%;
-    left: 0; }
-  #conversejs #controlbox .sidebar {
-    display: block; }
-  #conversejs #controlbox .controlbox-pane {
-    position: absolute;
-    top: 0;
-    display: none;
-    width: 100%; }
-  #conversejs.sidebar-open .chatbox:not(#controlbox) {
-    display: none; }
-  #conversejs.sidebar-open #controlbox .controlbox-pane {
-    display: block; } }
+@media (max-width: 767.98px) {
+  #conversejs {
+    left: 0;
+    right: 0;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right); }
+    #conversejs .converse-chatboxes {
+      margin: 0 !important;
+      flex-direction: row !important;
+      justify-content: space-between; }
+      #conversejs .converse-chatboxes .converse-chatroom {
+        font-size: 14px; }
+      #conversejs .converse-chatboxes .chatbox .box-flyout {
+        left: 0;
+        bottom: 0;
+        border-radius: 0;
+        width: 100vw !important;
+        height: 100vh !important; }
+      #conversejs .converse-chatboxes #controlbox {
+        order: 0; }
+        #conversejs .converse-chatboxes #controlbox .box-flyout {
+          width: 100vw !important;
+          height: 100vh !important; }
+        #conversejs .converse-chatboxes #controlbox .sidebar {
+          display: block; }
+      #conversejs .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
+        display: none; }
+      #conversejs .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
+        display: block; } }
 #conversejs.fullscreen #controlbox {
   position: relative;
   width: 100%;
@@ -6022,9 +6037,6 @@ body {
 #conversejs.fullscreen #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
   width: 80%; }
 
-#converse-embedded-chat .new-chatroom-nick,
-#conversejs .new-chatroom-nick {
-  margin: 1em auto; }
 #converse-embedded-chat .add-chatroom input[type="submit"],
 #converse-embedded-chat .add-chatroom input[type="button"],
 #conversejs .add-chatroom input[type="submit"],
@@ -6276,11 +6288,14 @@ body {
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
           font-size: 90%;
           color: #A53214; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
-        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
-        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
-          display: block; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
+          margin-top: 2em; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
+            display: block; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],

css/mobile.css

@@ -1,13 +0,0 @@
-#conversejs {
-    left: 0px;
-    right: 0px;
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
-}
-.converse-chatroom {
-    font-size: 14px;
-}
-.intro {
-    padding: 0;
-    height: 100vh;
-}

sass/_chatrooms.scss

@@ -1,9 +1,5 @@
 #converse-embedded-chat,
 #conversejs {
-    .new-chatroom-nick {
-        margin: 1em auto;
-    }
-
     .add-chatroom {
         input[type="submit"],
         input[type="button"] {
@@ -266,6 +262,8 @@
                         color: $error-color;
                     }
                     .chatroom-form {
+                        margin-top: 2em;
+
                         label,
                         input[type=text] {
                             display: block;

sass/_controlbox.scss

@@ -419,6 +419,7 @@
     }
 
     .toggle-controlbox {
+        text-align: center;
         background-color: $link-color;
         border-top-left-radius: $button-border-radius;
         border-top-right-radius: $button-border-radius;
@@ -433,36 +434,54 @@
     }
 }
 
-@media screen and (max-width: 767px) {
+@include media-breakpoint-down(sm) {
+
     #conversejs {
-        #controlbox {
-            .box-flyout {
-                width: 100%;
-                left: 0;
-            }
+        left: 0;
+        right: 0;
+        padding-left: env(safe-area-inset-left);
+        padding-right: env(safe-area-inset-right);
 
-            .sidebar {
-                display: block;
-            }
+        .converse-chatboxes {
+            margin: 0 !important;
+            flex-direction: row !important;
+            justify-content: space-between;
 
-            .controlbox-pane {
-                position: absolute;
-                top: 0;
-                display: none;
-                width: 100%;
+            .converse-chatroom {
+                font-size: 14px;
             }
 
-        }
-
-        &.sidebar-open {
-            .chatbox:not(#controlbox) {
-                display: none;
+            .chatbox { 
+                .box-flyout {
+                    left: 0;
+                    bottom: 0;
+                    border-radius: 0;
+                    width: 100vw !important;
+                    height: 100vh !important;
+                }
             }
+
             #controlbox {
-                .controlbox-pane {
+                order: 0;
+                .box-flyout {
+                    width: 100vw !important;
+                    height: 100vh !important;
+                }
+                .sidebar {
                     display: block;
                 }
             }
+
+            &.sidebar-open {
+                .chatbox:not(#controlbox) {
+                    display: none;
+                }
+                #controlbox {
+                    .controlbox-pane {
+                        display: block;
+                    }
+                }
+            }
         }
     }
 }