More moving of styles to more logical places

src/plugins/chatboxviews/styles/chats.scss

@@ -7,5 +7,14 @@
         converse-app-chat {
             width: 100%;
         }
+
+        &.converse-fullscreen,
+        &.converse-overlayed {
+            .converse-app-chat {
+                margin: 0 !important;
+                flex-direction: row !important;
+                justify-content: space-between;
+            }
+        }
     }
 }

src/plugins/chatview/styles/index.scss

@@ -1,69 +1,85 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-@import "shared/styles/_variables.scss";
-@import "./chatbox.scss";
-
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'shared/styles/_variables.scss';
+@import './chatbox.scss';
 
 /* ******************* Overlay and embedded styles *************************** */
 
 .conversejs {
-    converse-app-chat.converse-embedded,
-    converse-app-chat.converse-overlayed {
-        .controlbox-head {
-            padding: 0.5em;
-        }
-        .chat-head {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-        .chatbox {
-            min-width: var(--overlayed-chat-width) !important;
-            width: var(--overlayed-chat-width);
-
-            .box-flyout {
+    converse-app-chat {
+        &.converse-embedded,
+        &.converse-overlayed {
+            .controlbox-head {
+                padding: 0.5em;
+            }
+            .chat-head {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+            }
+            .chatbox {
                 min-width: var(--overlayed-chat-width) !important;
                 width: var(--overlayed-chat-width);
+
+                .box-flyout {
+                    min-width: var(--overlayed-chat-width) !important;
+                    width: var(--overlayed-chat-width);
+                }
             }
         }
-    }
 
-    converse-app-chat.converse-overlayed  {
-        .chat-head, .box-flyout {
-            border-top-left-radius: var(--chatbox-border-radius);
-            border-top-right-radius: var(--chatbox-border-radius);
-            @media screen and (max-height: $mobile-landscape-height) {
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
+        &.converse-overlayed {
+            display: flex;
+            flex-direction: row-reverse;
+
+            .brand-heading {
+                padding-inline-start: 1em;
+                width: 100%;
             }
-            @media screen and (max-width: $mobile-portrait-length) {
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
+
+            .converse-svg-logo {
+                margin-right: 0.1em;
+                height: 1em;
             }
-        }
 
-        .flyout {
-            bottom: var(--overlayed-chatbox-hover-height);
-        }
-        .box-flyout {
-            height: var(--overlayed-chat-height);
-            min-height: calc(var(--overlayed-chat-height) / 2);
-        }
-        .minimized-chats-flyout .chat-head {
-            cursor: default;
-        }
-        .chat-textarea {
-            max-height: var(--overlayed-max-chat-textarea-height);
-        }
-        .chatbox {
-            .chat-body {
-                height: calc(100% - var(--overlayed-chat-head-height));
+            .chat-head,
+            .box-flyout {
+                border-top-left-radius: var(--chatbox-border-radius);
+                border-top-right-radius: var(--chatbox-border-radius);
+                @media screen and (max-height: $mobile-landscape-height) {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                }
+                @media screen and (max-width: $mobile-portrait-length) {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                }
+            }
+
+            .flyout {
+                border: 0;
+                bottom: var(--overlayed-chatbox-hover-height);
+            }
+            .box-flyout {
+                height: var(--overlayed-chat-height);
+                min-height: calc(var(--overlayed-chat-height) / 2);
             }
-            .chatbox-title {
-                padding: 0.5rem 0.75rem 0 0.75rem;
+            .minimized-chats-flyout .chat-head {
+                cursor: default;
             }
-            .chatbox-title--no-desc {
-                padding: 0.5rem 0.75rem;
+            .chat-textarea {
+                max-height: var(--overlayed-max-chat-textarea-height);
+            }
+            .chatbox {
+                .chat-body {
+                    height: calc(100% - var(--overlayed-chat-head-height));
+                }
+                .chatbox-title {
+                    padding: 0.5rem 0.75rem 0 0.75rem;
+                }
+                .chatbox-title--no-desc {
+                    padding: 0.5rem 0.75rem;
+                }
             }
         }
     }
@@ -79,10 +95,10 @@
 
 .conversejs {
     converse-app-chat.converse-embedded,
-    converse-app-chat.converse-fullscreen  {
+    converse-app-chat.converse-fullscreen {
         .flyout {
             border-radius: 0;
-            border:none;
+            border: none;
             bottom: 0;
         }
 
@@ -94,7 +110,7 @@
         }
     }
 
-    converse-app-chat.converse-fullscreen  {
+    converse-app-chat.converse-fullscreen {
         &:not(.converse-singleton) {
             .chatbox {
                 @include media-breakpoint-up(md) {
@@ -147,7 +163,7 @@
 /* ******************* Fullpage styles *************************** */
 
 .conversejs {
-    converse-app-chat.converse-fullscreen  {
+    converse-app-chat.converse-fullscreen {
         .chatbox-btn {
             font-size: var(--fullpage-chatbox-button-size);
         }
@@ -183,10 +199,9 @@
     }
 }
 
-
 @include media-breakpoint-down(md) {
     .conversejs {
-        converse-app-chat:not(.converse-embedded)  {
+        converse-app-chat:not(.converse-embedded) {
             > .row {
                 flex-direction: row-reverse;
             }
@@ -210,6 +225,18 @@
 
         converse-app-chat.converse-overlayed,
         converse-app-chat.converse-fullscreen {
+            .converse-app-chat {
+                .chatbox {
+                    .box-flyout {
+                        left: 0;
+                        bottom: 0;
+                        border-radius: 0;
+                        width: 100vw !important;
+                        height: var(--fullpage-chat-height);
+                    }
+                }
+            }
+
             .chat-head {
                 converse-controlbox-navback {
                     margin: auto 0;

src/plugins/controlbox/styles/_controlbox.scss

@@ -164,14 +164,8 @@
 }
 
 .conversejs {
-    converse-app-chat {
+    .converse-app {
         &.converse-overlayed {
-            display: flex;
-            flex-direction: row-reverse;
-            .flyout {
-                border: 0;
-            }
-
             .toggle-controlbox {
                 background-color: var(--controlbox-color);
                 color: var(--button-text-color);
@@ -192,15 +186,6 @@
                 }
             }
 
-            .brand-heading {
-                padding-inline-start: 1em;
-                width: 100%;
-            }
-
-            .converse-svg-logo {
-                margin-right: 0.1em;
-                height: 1em;
-            }
         }
 
         &.converse-embedded,
@@ -306,30 +291,7 @@
     .conversejs {
         &.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;
-                }
-
-                .chatbox {
-                    .box-flyout {
-                        left: 0;
-                        bottom: 0;
-                        border-radius: 0;
-                        width: 100vw !important;
-                        height: var(--fullpage-chat-height);
-                    }
-                }
-
+            .converse-app {
                 #controlbox {
                     margin-inline-start: 0;
                     width: 100vw !important;

src/plugins/rootview/styles/root.scss

@@ -3,6 +3,7 @@ converse-root {
     &.converse-overlayed {
         bottom: 0;
         left: 0;
+        right: 0;
         padding-inline-start: env(safe-area-inset-left);
         padding-inline-end: env(safe-area-inset-right);
         position: fixed;