Fix margin issues at different viewport sizes

src/plugins/chatview/styles/index.scss

@@ -100,6 +100,7 @@
             .box-flyout {
                 box-shadow: none;
                 overflow: hidden;
+                margin-left: 0;
             }
         }
     }

src/plugins/controlbox/styles/_controlbox.scss

@@ -423,6 +423,13 @@
                     width: var(--controlbox-width);
                 }
 
+                @media screen and (max-width: $mobile-portrait-length) {
+                    margin-left: -15px;
+                }
+                @include media-breakpoint-down(sm) {
+                    margin-left: -15px;
+                }
+
                 .login-trusted {
                     white-space: nowrap;
                     font-size: 90%;
@@ -469,6 +476,23 @@
                     border-radius: var(--chatbox-border-radius);
                 }
             }
+
+            .brand-heading {
+                padding-top: 0.8rem;
+                padding-left: 0.8rem;
+                width: 100%;
+            }
+            .converse-svg-logo {
+                height: 1em;
+            }
+            #controlbox {
+                #converse-login-panel {
+                    height: 100%;
+                }
+                .controlbox-panes {
+                    margin-top: 0.5em;
+                }
+            }
         }
 
         &.converse-embedded,
@@ -587,30 +611,17 @@
         &.converse-fullscreen {
             #controlbox {
                 margin-left: -15px;
+                @media screen and (max-width: $mobile-portrait-length) {
+                    margin-left: 0;
+                }
+                @include media-breakpoint-down(sm) {
+                    margin-left: 0;
+                }
             }
             .controlbox-panes {
                 padding-top: 2em;
             }
         }
-
-        &.converse-overlayed {
-            .brand-heading {
-                padding-top: 0.8rem;
-                padding-left: 0.8rem;
-                width: 100%;
-            }
-            .converse-svg-logo {
-                height: 1em;
-            }
-            #controlbox {
-                #converse-login-panel {
-                    height: 100%;
-                }
-                .controlbox-panes {
-                    margin-top: 0.5em;
-                }
-            }
-        }
     }
 }
 
@@ -633,7 +644,6 @@
 
             .chatbox {
                 .box-flyout {
-                    margin-left: 15px; // Counteracts Bootstrap margins, but not clear why needed...
                     left: 0;
                     bottom: 0;
                     border-radius: 0;
@@ -643,6 +653,7 @@
             }
 
             #controlbox {
+                margin-left: 0;
                 width: 100vw !important;
                 .box-flyout {
                     width: 100vw !important;

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

@@ -0,0 +1,17 @@
+.conversejs {
+    #controlbox {
+        #chatrooms {
+            padding: 0;
+
+            .add-chatroom {
+                input[type=button],
+                input[type=submit],
+                input[type=text] {
+                    width: 100%;
+                }
+                margin: 0;
+                padding: 0;
+            }
+        }
+    }
+}

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

@@ -3,6 +3,7 @@
 @import "bootstrap/scss/mixins";
 @import "shared/styles/_variables.scss";
 
+@import "./controlbox.scss";
 @import "./muc.scss";
 @import "./muc-details-modal.scss";
 

src/plugins/singleton/singleton.scss

@@ -2,6 +2,8 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/media";
+@import "shared/styles/_variables.scss";
+@import "shared/styles/_mixins.scss";
 
 
 .conversejs {
@@ -18,6 +20,12 @@
                 margin: 0;
                 position: relative;
                 margin-left: -15px;
+                @media screen and (max-width: $mobile-portrait-length) {
+                    margin-left: 0;
+                }
+                @include media-breakpoint-down(sm) {
+                    margin-left: 0;
+                }
             }
         }
     }