Fixes #3676

CHANGES.md

@@ -3,6 +3,7 @@
 ## 11.0.0 (Unreleased)
 
 - #3672: Images not rendering
+- #3676: Flyout box is not positioned correctly on mobile devices in "overlayed" mode
 - Remove modal from the DOM when it's closed
 - Fix login form style for `classic` theme
 - Properly handle OGP metadata that doesn't have an image

src/plugins/chatboxviews/styles/chats.scss

@@ -1,3 +1,7 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
 .conversejs {
     converse-chats {
         &.converse-overlayed {
@@ -43,3 +47,11 @@
         }
     }
 }
+
+@include media-breakpoint-down(sm) {
+    .conversejs {
+        converse-chats {
+            width: 100%;
+        }
+    }
+}

src/plugins/controlbox/styles/_controlbox.scss

@@ -303,16 +303,6 @@
 
 @include media-breakpoint-down(sm) {
     .conversejs {
-        &.converse-overlayed {
-            .converse-chatboxes {
-                .chatbox {
-                    .box-flyout {
-                        margin-left: -1em !important;
-                    }
-                }
-            }
-        }
-
         &.converse-fullscreen,
         &.converse-overlayed {
             left: 0;

src/plugins/muc-views/styles/index.scss

@@ -32,10 +32,8 @@ converse-muc-destroyed {
         &.converse-overlayed {
             .chatbox {
                 &.chatroom {
-                    min-width: var(--chatroom-width) !important;
                     width: var(--chatroom-width);
                     .box-flyout {
-                        min-width: var(--chatroom-width) !important;
                         width: var(--chatroom-width);
                     }
                     .chatbox-title__text {