Fix gutters between chats.

Looks like this also fixes #3413

src/plugins/chatboxviews/styles/chats.scss

@@ -1,28 +1,23 @@
 .conversejs {
     converse-chats {
-        &.converse-chatboxes {
-            z-index: 1031; // One more than bootstrap navbar
-            position: fixed;
-            bottom: 0;
-            right: 0;
-            left: 1em;
-        }
         &.converse-overlayed {
             > .row {
                 flex-direction: row-reverse;
             }
+            &.converse-chatboxes {
+                z-index: 1031; // One more than bootstrap navbar
+                position: fixed;
+                bottom: 0;
+                right: 0;
+                left: 1em;
+            }
         }
 
         &.converse-fullscreen,
         &.converse-mobile {
             flex-wrap: nowrap;
-            width: 100vw;
         }
         &.converse-embedded {
-            box-sizing: border-box;
-            *, *:before, *:after {
-                box-sizing: border-box;
-            }
             bottom: auto;
             height: 100%; // When embedded, it fills the containing element
             position: relative;

src/plugins/chatview/styles/chatbox.scss

@@ -1,7 +1,16 @@
+.conversejs {
+    converse-chats {
+        &.converse-overlayed {
+            .chatbox {
+                margin: 0 var(--overlayed-chat-gutter);
+            }
+        }
+    }
+}
+
 .conversejs {
     .chatbox {
         text-align: left;
-        margin: 0 var(--chat-gutter);
 
         @media screen and (max-height: $mobile-landscape-height) {
             margin: 0;

src/plugins/chatview/styles/index.scss

@@ -113,13 +113,13 @@
                 &:not(#controlbox) {
                     .box-flyout {
                         @include media-breakpoint-up(md) {
-                            max-width: 66.666667%;
+                            @include make-col(8);
                         }
                         @include media-breakpoint-up(lg) {
-                            max-width: 75%;
+                            @include make-col(9);
                         }
                         @include media-breakpoint-up(xl) {
-                            max-width: 83.333333%;
+                            @include make-col(10);
                         }
                     }
                 }

src/plugins/controlbox/styles/_controlbox.scss

@@ -82,8 +82,6 @@
             background-color: var(--controlbox-pane-background-color);
         }
 
-        margin-right: calc(3 * var(--chat-gutter));
-
         &.logged-out {
             .box-flyout {
                 .controlbox-pane {
@@ -329,25 +327,19 @@
                 text-align: center;
                 background-color: var(--controlbox-head-color);
                 float: right;
-                margin: 0 var(--chat-gutter);
+                margin: 0 var(--overlayed-chat-gutter);
             }
 
             #controlbox {
                 order: -1;
                 min-width: var(--controlbox-width) !important;
                 width: var(--controlbox-width);
+
                 .box-flyout {
                     min-width: var(--controlbox-width) !important;
                     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%;
@@ -510,7 +502,6 @@
 
         &.converse-fullscreen {
             #controlbox {
-                margin-left: -15px;
                 @media screen and (max-width: $mobile-portrait-length) {
                     margin-left: 0;
                 }
@@ -519,13 +510,13 @@
                 }
                 .box-flyout {
                     @include media-breakpoint-up(md) {
-                        max-width: 33.333333%;
+                        @include make-col(4);
                     }
                     @include media-breakpoint-up(lg) {
-                        max-width: 25%;
+                        @include make-col(3);
                     }
                     @include media-breakpoint-up(xl) {
-                        max-width: 17.666667%;
+                        @include make-col(2);
                     }
                 }
             }
@@ -570,7 +561,6 @@
                 .box-flyout {
                     width: 100vw !important;
                     height: var(--fullpage-chat-height);
-                    margin-right: -15px;
                 }
                 .sidebar {
                     display: block;

src/plugins/rootview/root.js

@@ -32,6 +32,7 @@ export default class ConverseRoot extends CustomElement {
     setClasses () {
         this.className = "";
         this.classList.add('container-fluid');
+        this.classList.add('g-0');
         this.classList.add('conversejs');
         this.classList.add(`converse-${api.settings.get('view_mode')}`);
         this.classList.add(`theme-${getTheme()}`);

src/shared/styles/_variables.scss

@@ -37,14 +37,13 @@ $mobile_portrait_length: 480px !default;
 
     --embedded-emoji-picker-height: 300px;
 
-    --chat-gutter: 1em;
-
     --occupants-padding: 1em;
 
     --minimized-chats-width: 130px;
     --mobile-chat-width: 100%;
     --mobile-chat-height: 400px;
 
+    --overlayed-chat-gutter: 1em;
     --overlayed-chat-head-height: 55px;
     --overlayed-chat-height: 450px;
     --overlayed-chat-width: 300px;