Fixes #3100: fixed width `.box-flyout` breaks responsive design

in embedded, mobile viewport mode.

CHANGES.md

@@ -15,6 +15,7 @@
 - #2716: Fix issue with chat display when opening via URL
 - #2980: Allow setting an avatar for MUCs
 - #3033: Add the `muc_grouped_by_domain` option to display MUCs on the same domain in collapsible groups
+- #3100: fixed width `.box-flyout` breaks responsive design in embedded, mobile viewport mode.
 - #3155: Some ad-hoc commands not working
 - #3155: Some adhoc commands aren't working
 - #3299: Registration fails when a password contains an &

dev.html

@@ -38,6 +38,7 @@
         muc_show_logs_before_join: true,
         notify_all_room_messages: ['discuss@conference.conversejs.org'],
         websocket_url: 'wss://conversejs.org/xmpp-websocket',
+        // view_mode: 'overlayed',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         whitelisted_plugins: ['converse-debug'],
         // connection_options: { worker: '/dist/shared-connection-worker.js' }

src/plugins/controlbox/styles/_controlbox.scss

@@ -1,8 +1,8 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-@import "shared/styles/_variables.scss";
-@import "shared/styles/_mixins.scss";
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'shared/styles/_variables.scss';
+@import 'shared/styles/_mixins.scss';
 
 .conversejs {
     .room-info {
@@ -102,9 +102,9 @@
             padding: 0;
 
             .add-chatroom {
-                input[type=button],
-                input[type=submit],
-                input[type=text] {
+                input[type='button'],
+                input[type='submit'],
+                input[type='text'] {
                     width: 100%;
                 }
                 margin: 0;
@@ -159,7 +159,6 @@
             .chatbox-btn {
                 margin: 0;
             }
-
         }
 
         .add-xmpp-contact {
@@ -178,7 +177,6 @@
 .conversejs {
     converse-chats {
         &.converse-overlayed {
-
             display: flex;
             flex-direction: row-reverse;
 
@@ -315,53 +313,65 @@
 }
 
 @include media-breakpoint-down(sm) {
-
     .conversejs {
-        left: 0;
-        right: 0;
-        padding-inline-start: env(safe-area-inset-left);
-        padding-inline-end: env(safe-area-inset-right);
-
-        .converse-chatboxes {
-            margin: 0 !important;
-            flex-direction: row !important;
-            justify-content: space-between;
-
-            .converse-chatroom {
-                font-size: 14px;
-            }
-
-            .chatbox {
-                .box-flyout {
-                    left: 0;
-                    bottom: 0;
-                    border-radius: 0;
-                    width: 100vw !important;
-                    height: var(--fullpage-chat-height);
+        &.converse-overlayed {
+            .converse-chatboxes {
+                .chatbox {
+                    .box-flyout {
+                        margin-left: -1em !important;
+                    }
                 }
             }
+        }
 
-            #controlbox {
-                margin-inline-start: 0;
-                width: 100vw !important;
-                .box-flyout {
-                    width: 100vw !important;
-                    height: var(--fullpage-chat-height);
-                }
-                .sidebar {
-                    display: block;
+        &.converse-fullscreen,
+        &.converse-overlayed {
+            left: 0;
+            right: 0;
+            padding-inline-start: env(safe-area-inset-left);
+            padding-inline-end: env(safe-area-inset-right);
+
+            .converse-chatboxes {
+                margin: 0 !important;
+                flex-direction: row !important;
+                justify-content: space-between;
+
+                .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: var(--fullpage-chat-height);
+                    }
                 }
+
                 #controlbox {
-                    .controlbox-pane {
+                    margin-inline-start: 0;
+                    width: 100vw !important;
+                    .box-flyout {
+                        width: 100vw !important;
+                        height: var(--fullpage-chat-height);
+                    }
+                    .sidebar {
                         display: block;
                     }
                 }
+
+                &.sidebar-open {
+                    .chatbox:not(#controlbox) {
+                        display: none;
+                    }
+                    #controlbox {
+                        .controlbox-pane {
+                            display: block;
+                        }
+                    }
+                }
             }
         }
     }