Various CSS fixes

sass/_autocomplete.scss

@@ -126,13 +126,13 @@
     }
 
     converse-chats {
-        .converse-fullscreen {
+        &.converse-fullscreen {
             .suggestion-box__results--above {
                 bottom: 4.5em;
             }
         }
 
-        .converse-overlayed {
+        &.converse-overlayed {
             .suggestion-box__results--above {
                 bottom: 3.5em;
             }

sass/_chatbox.scss

@@ -396,239 +396,263 @@
 
 /* ******************* Overlay and embedded styles *************************** */
 
-converse-chats.converse-embedded,
-converse-chats.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 {
+#conversejs {
+    converse-chats.converse-embedded,
+    converse-chats.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-chats.converse-overlayed  {
+    converse-chats.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;
-        }
-        @media screen and (max-width: $mobile-portrait-length) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
+        .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 {
-        bottom: var(--overlayed-chatbox-hover-height);
-    }
-    .box-flyout {
-        height: var(--overlayed-chat-height);
-        min-height: calc(var(--overlayed-chat-height) / 2);
-    }
-    .chat-head {
-        min-height: var(--overlayed-chat-head-height);
-    }
-    .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));
+        .flyout {
+            bottom: var(--overlayed-chatbox-hover-height);
         }
-        .chatbox-title {
-            padding: 0.5rem 0.75rem 0 0.75rem;
+        .box-flyout {
+            height: var(--overlayed-chat-height);
+            min-height: calc(var(--overlayed-chat-height) / 2);
         }
-        .chatbox-title--no-desc {
-            padding: 0.5rem 0.75rem;
+        .chat-head {
+            min-height: var(--overlayed-chat-head-height);
         }
-        converse-dropdown {
-            .btn--standalone {
-                padding: 0 0.2em;
-                margin: 0 0 0 0.5em;
+        .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));
+            }
+            .chatbox-title {
+                padding: 0.5rem 0.75rem 0 0.75rem;
+            }
+            .chatbox-title--no-desc {
+                padding: 0.5rem 0.75rem;
+            }
+            converse-dropdown {
+                .btn--standalone {
+                    padding: 0 0.2em;
+                    margin: 0 0 0 0.5em;
+                }
             }
         }
     }
 }
 
 @include media-breakpoint-down(sm) {
-    converse-chats.converse-overlayed {
-        > .row {
-            flex-direction: column;
-            &.no-gutters {
-                margin: -1em;
+    #conversejs {
+        converse-chats.converse-overlayed {
+            > .row {
+                flex-direction: column;
+                &.no-gutters {
+                    margin: -1em;
+                }
             }
         }
     }
 }
 
 
-converse-chats.converse-embedded,
-converse-chats.converse-fullscreen  {
-    .flyout {
-        border-radius: 0;
-        border:none;
-        bottom: 0;
-    }
-
-    .chatbox {
-        margin: 0;
-        .box-flyout {
-            box-shadow: none;
-            overflow: hidden;
-        }
-        @include make-col-ready();
-        @include media-breakpoint-up(md) {
-            @include make-col(8);
-        }
-        @include media-breakpoint-up(lg) {
-            @include make-col(9);
-        }
-        @include media-breakpoint-up(xl) {
-            @include make-col(10);
-        }
-    }
-
-    &.converse-singleton {
+#conversejs {
+    converse-chats.converse-embedded,
+    converse-chats.converse-fullscreen  {
         .flyout {
-            border: none !important;
-        }
-        .chat-head {
-            padding: 0.5em;
+            border-radius: 0;
+            border:none;
+            bottom: 0;
         }
+
         .chatbox {
             margin: 0;
-            @include make-col-ready();
+            margin-left: 15px;
+            .box-flyout {
+                box-shadow: none;
+                overflow: hidden;
+            }
+            &:not(#controlbox) {
+                .box-flyout {
+                    @include media-breakpoint-up(md) {
+                        max-width: 66.666667%;
+                    }
+                    @include media-breakpoint-up(lg) {
+                        max-width: 75%;
+                    }
+                    @include media-breakpoint-up(xl) {
+                        max-width: 83.333333%;
+                    }
+                }
+            }
             @include media-breakpoint-up(md) {
-                @include make-col(12);
+                @include make-col(8);
             }
             @include media-breakpoint-up(lg) {
-                @include make-col(12);
+                @include make-col(9);
             }
             @include media-breakpoint-up(xl) {
-                @include make-col(12);
+                @include make-col(10);
             }
         }
-    }
-}
 
-converse-chats.converse-embedded {
-    .chat-head {
-        font-size: var(--font-size-huge);
+        &.converse-singleton {
+            .flyout {
+                border: none !important;
+            }
+            .chat-head {
+                padding: 0.5em;
+            }
+            .chatbox {
+                margin: 0;
+                @include make-col-ready();
+                @include media-breakpoint-up(md) {
+                    @include make-col(12);
+                }
+                @include media-breakpoint-up(lg) {
+                    @include make-col(12);
+                }
+                @include media-breakpoint-up(xl) {
+                    @include make-col(12);
+                }
+            }
+        }
     }
 
-    .converse-chatboxes {
-        z-index: 1031; // One more than bootstrap navbar
-        position: inherit;
-        flex-wrap: nowrap;
-        bottom: auto;
-        height: 100%;
-        width: 100%;
-        margin-left: -15px;
-    }
+    converse-chats.converse-embedded {
+        .chat-head {
+            font-size: var(--font-size-huge);
+        }
 
-    .chatbox {
-        .box-flyout {
-            bottom: 0;
+        &.converse-chatboxes {
+            z-index: 1031; // One more than bootstrap navbar
+            position: inherit;
+            flex-wrap: nowrap;
+            bottom: auto;
             height: 100%;
-            min-width: auto;
             width: 100%;
+            margin-left: -15px;
         }
-    }
 
-    .chat-textarea {
-        max-height: var(--fullpage-max-chat-textarea-height);
+        .chatbox {
+            .box-flyout {
+                bottom: 0;
+                height: 100%;
+                min-width: auto;
+                width: 100%;
+            }
+        }
+
+        .chat-textarea {
+            max-height: var(--fullpage-max-chat-textarea-height);
+        }
     }
 }
 
 /* ******************* Fullpage styles *************************** */
 
-converse-chats.converse-fullscreen  {
-    .chatbox-btn {
-        font-size: var(--fullpage-chatbox-button-size);
-        margin: 0 0.3em;
-    }
-    .chat-head {
-        font-size: var(--font-size-huge);
-    }
-    .chat-textarea {
-        max-height: var(--fullpage-max-chat-textarea-height);
-    }
-    .chatbox {
-        .box-flyout {
-            box-shadow: none;
-            height: var(--fullpage-chat-height);
-            min-height: calc(var(--fullpage-chat-height) / 2);
-            width: var(--fullpage-chat-width);
-            overflow: hidden;
-        }
-        .chat-body {
-            height: inherit;
-            overflow: hidden;
-            background-color: var(--chat-head-color);
+#conversejs {
+    converse-chats.converse-fullscreen  {
+        .chatbox-btn {
+            font-size: var(--fullpage-chatbox-button-size);
+            margin: 0 0.3em;
         }
-        .chat-title {
+        .chat-head {
             font-size: var(--font-size-huge);
-            line-height: var(--line-height-huge);
         }
-        .sendXMPPMessage {
-            ul {
-                width: 100%;
+        .chat-textarea {
+            max-height: var(--fullpage-max-chat-textarea-height);
+        }
+        .chatbox {
+            .box-flyout {
+                box-shadow: none;
+                height: var(--fullpage-chat-height);
+                min-height: calc(var(--fullpage-chat-height) / 2);
+                width: var(--fullpage-chat-width);
+                overflow: hidden;
+            }
+            .chat-body {
+                height: inherit;
+                overflow: hidden;
+                background-color: var(--chat-head-color);
+            }
+            .chat-title {
+                font-size: var(--font-size-huge);
+                line-height: var(--line-height-huge);
+            }
+            .sendXMPPMessage {
+                ul {
+                    width: 100%;
+                }
             }
         }
     }
 }
 
+
 @include media-breakpoint-down(sm) {
-    converse-chats:not(.converse-embedded)  {
-        > .row {
-            flex-direction: row-reverse;
-        }
-        #converse-login-panel {
-            .converse-form {
-                padding: 3em 2em 3em;
+    #conversejs {
+        converse-chats:not(.converse-embedded)  {
+            > .row {
+                flex-direction: row-reverse;
+            }
+            #converse-login-panel {
+                .converse-form {
+                    padding: 3em 2em 3em;
+                }
             }
-        }
-        .chatbox {
-            width: calc(100% - 50px);
-            .row {
-                .box-flyout {
-                    left: 50px;
-                    bottom: 0;
-                    height: var(--fullpage-chat-height);
-                    box-shadow: none;
+            .chatbox {
+                width: calc(100% - 50px);
+                .row {
+                    .box-flyout {
+                        left: 50px;
+                        bottom: 0;
+                        height: var(--fullpage-chat-height);
+                        box-shadow: none;
+                    }
                 }
             }
         }
-    }
 
-    converse-chats.converse-mobile,
-    converse-chats.converse-overlayed,
-    converse-chats.converse-fullscreen {
-        .chatbox {
-            .box-flyout {
-                .chatbox-navback {
-                    margin: auto 0;
-                    margin-right: 1em;
-                    display: flex;
-                    .fa-arrow-left {
-                        &:before {
-                            color: white;
+        converse-chats.converse-mobile,
+        converse-chats.converse-overlayed,
+        converse-chats.converse-fullscreen {
+            .chatbox {
+                .box-flyout {
+                    .chatbox-navback {
+                        margin: auto 0;
+                        margin-right: 1em;
+                        display: flex;
+                        .fa-arrow-left {
+                            &:before {
+                                color: white;
+                            }
                         }
                     }
                 }

sass/_chatrooms.scss

@@ -396,127 +396,129 @@
 
 /* ******************* Overlay  styles *************************** */
 
-converse-chats {
-    .converse-overlayed {
-        .chatbox {
-            &.chatroom {
-                min-width: var(--chatroom-width) !important;
-                width: var(--chatroom-width);
-                .box-flyout {
+#conversejs {
+    converse-chats {
+        &.converse-overlayed {
+            .chatbox {
+                &.chatroom {
                     min-width: var(--chatroom-width) !important;
                     width: var(--chatroom-width);
-                }
-                .chatbox-title__text {
-                    @include make-col(7);
-                }
-                .chatbox-title__buttons {
-                    @include make-col(5);
-                }
+                    .box-flyout {
+                        min-width: var(--chatroom-width) !important;
+                        width: var(--chatroom-width);
+                    }
+                    .chatbox-title__text {
+                        @include make-col(7);
+                    }
+                    .chatbox-title__buttons {
+                        @include make-col(5);
+                    }
 
-                .chat-head__desc {
-                    font-size: 80%;
-                    margin-bottom: 1em;
-                }
-                .chatroom-body {
-                    .occupants {
-                        .occupants-heading {
-                            padding: 0;
-                        }
-                        .occupant-list {
-                            border-bottom: none;
-                        }
-                        ul {
-                            .occupant {
-                                .occupant-nick-badge {
-                                    .occupant-badges {
-                                        display: none;
+                    .chat-head__desc {
+                        font-size: 80%;
+                        margin-bottom: 1em;
+                    }
+                    .chatroom-body {
+                        .occupants {
+                            .occupants-heading {
+                                padding: 0;
+                            }
+                            .occupant-list {
+                                border-bottom: none;
+                            }
+                            ul {
+                                .occupant {
+                                    .occupant-nick-badge {
+                                        .occupant-badges {
+                                            display: none;
+                                        }
+                                    }
+                                    .occupant-status {
+                                        margin-top: 6px;
                                     }
-                                }
-                                .occupant-status {
-                                    margin-top: 6px;
                                 }
                             }
                         }
-                    }
-                    .chat-area {
-                        min-width: var(--overlayed-chat-width);
+                        .chat-area {
+                            min-width: var(--overlayed-chat-width);
+                        }
                     }
                 }
             }
         }
-    }
 
-    .converse-embedded,
-    .converse-fullscreen,
-    .converse-mobile {
+        &.converse-embedded,
+        &.converse-fullscreen,
+        &.converse-mobile {
 
-        .chatroom {
-            .box-flyout {
-                width: 100%;
+            .chatroom {
+                .box-flyout {
+                    width: 100%;
 
-                .chatroom-body {
-                    .chat-area {
-                        &.full {
-                            .new-msgs-indicator {
-                                max-width: 100%;
+                    .chatroom-body {
+                        .chat-area {
+                            &.full {
+                                .new-msgs-indicator {
+                                    max-width: 100%;
+                                }
                             }
                         }
-                    }
-                    .occupants {
-                        padding: var(--occupants-padding);
-                        .occupants-heading {
-                            font-size: var(--font-size-large);
-                        }
-                        ul {
-                            &.occupant-list {
-                                li {
-                                    font-size: var(--font-size-small);
+                        .occupants {
+                            padding: var(--occupants-padding);
+                            .occupants-heading {
+                                font-size: var(--font-size-large);
+                            }
+                            ul {
+                                &.occupant-list {
+                                    li {
+                                        font-size: var(--font-size-small);
+                                    }
                                 }
                             }
                         }
                     }
                 }
-            }
-            .room-invite {
-                span {
-                    .invited-contact {
-                        margin: 0 0 0.5em -1px;
+                .room-invite {
+                    span {
+                        .invited-contact {
+                            margin: 0 0 0.5em -1px;
+                        }
                     }
                 }
             }
         }
-    }
 
-    .converse-embedded {
-        .chatroom {
-            margin: 0;
-            width: 100%;
-            .box-flyout {
-                .occupants-heading {
-                    font-size: 120%;
-                }
-                .chat-content {
-                    .chat-message {
-                        margin: 0.5em;
+        &.converse-embedded {
+            .chatroom {
+                margin: 0;
+                width: 100%;
+                .box-flyout {
+                    .occupants-heading {
                         font-size: 120%;
                     }
-                }
-                .sendXMPPMessage {
-                    .chat-textarea {
-                        padding: 0.5em;
-                        font-size: 110%;
+                    .chat-content {
+                        .chat-message {
+                            margin: 0.5em;
+                            font-size: 120%;
+                        }
                     }
-                }
-                .chatroom-body {
-                    height: 100%;
-                    .chatroom-form-container {
+                    .sendXMPPMessage {
+                        .chat-textarea {
+                            padding: 0.5em;
+                            font-size: 110%;
+                        }
+                    }
+                    .chatroom-body {
                         height: 100%;
-                        position: relative;
+                        .chatroom-form-container {
+                            height: 100%;
+                            position: relative;
+                        }
                     }
-                }
-                .occupants {
-                    .occupant-list {
-                        padding-left: 0.3em;
+                    .occupants {
+                        .occupant-list {
+                            padding-left: 0.3em;
+                        }
                     }
                 }
             }
@@ -526,17 +528,19 @@ converse-chats {
 
 
 @include media-breakpoint-down(sm) {
-    converse-chats.converse-mobile,
-    converse-chats.converse-overlayed,
-    converse-chats.converse-fullscreen {
-        .chatbox {
-            .box-flyout {
-                .chat-head-chatroom {
-                    .chatbox-navback {
-                        margin-right: 0 !important;
-                        .fa-arrow-left {
-                            &:before {
-                                color: var(--chatroom-head-color);
+    #conversejs {
+        converse-chats.converse-mobile,
+        converse-chats.converse-overlayed,
+        converse-chats.converse-fullscreen {
+            .chatbox {
+                .box-flyout {
+                    .chat-head-chatroom {
+                        .chatbox-navback {
+                            margin-right: 0 !important;
+                            .fa-arrow-left {
+                                &:before {
+                                    color: var(--chatroom-head-color);
+                                }
                             }
                         }
                     }

sass/_controlbox.scss

@@ -95,6 +95,7 @@
         }
 
         .box-flyout {
+            margin-left: 0;
             background-color: var(--controlbox-pane-background-color);
         }
 
@@ -572,7 +573,7 @@
 
         &.converse-fullscreen {
             .controlbox-panes {
-                padding-top: 1em;
+                padding-top: 2em;
             }
         }
 

sass/_core.scss

@@ -115,21 +115,19 @@ body.converse-fullscreen {
     }
 
     converse-chats {
-      .converse-overlayed {
+      &.converse-overlayed {
           height: 3em;
           > .row {
               flex-direction: row-reverse;
           }
       }
 
-      .converse-fullscreen,
-      .converse-mobile {
-          .converse-chatboxes {
-              width: 100vw;
-              left: -15px; // Hack due to padding added by bootstrap
-          }
+      &.converse-fullscreen,
+      &.converse-mobile {
+          flex-wrap: nowrap;
+          width: 100vw;
       }
-      .converse-embedded {
+      &.converse-embedded {
           box-sizing: border-box;
           *, *:before, *:after {
               box-sizing: border-box;

sass/_emoji.scss

@@ -185,73 +185,75 @@
     }
 }
 
-converse-chats {
-    .converse-overlayed  {
-        converse-emoji-dropdown {
-            .dropdown-menu {
-                min-width: 18em;
-            }
-        }
-        .chatbox {
-            .emoji-picker__header {
-                .emoji-category {
-                    img {
-                        height: var(--font-size) !important;
-                        width: var(--font-size) !important;
-                    }
+#conversejs {
+    converse-chats {
+        &.converse-overlayed  {
+            converse-emoji-dropdown {
+                .dropdown-menu {
+                    min-width: 18em;
                 }
             }
-            converse-emoji-picker {
-                .emoji-picker {
-                    .insert-emoji {
-                        a {
-                            font-size: var(--font-size);
-                            line-height: calc(var(--font-size) * 1.5);
-                            padding: 0;
-                            height: calc(var(--font-size) * 1.5);
-                            width: calc(var(--font-size) * 1.5);
-                        }
+            .chatbox {
+                .emoji-picker__header {
+                    .emoji-category {
                         img {
-                            height: var(--font-size);
-                            width: var(--font-size);
+                            height: var(--font-size) !important;
+                            width: var(--font-size) !important;
                         }
                     }
                 }
-                .emoji-skintone-picker {
-                    font-size: var(--font-size-small);
-                }
-                .emoji-picker__header {
-                    .emoji-category {
+                converse-emoji-picker {
+                    .emoji-picker {
+                        .insert-emoji {
+                            a {
+                                font-size: var(--font-size);
+                                line-height: calc(var(--font-size) * 1.5);
+                                padding: 0;
+                                height: calc(var(--font-size) * 1.5);
+                                width: calc(var(--font-size) * 1.5);
+                            }
+                            img {
+                                height: var(--font-size);
+                                width: var(--font-size);
+                            }
+                        }
+                    }
+                    .emoji-skintone-picker {
                         font-size: var(--font-size-small);
                     }
-                }
-                .emoji-picker__lists {
-                    height: 7em;
+                    .emoji-picker__header {
+                        .emoji-category {
+                            font-size: var(--font-size-small);
+                        }
+                    }
+                    .emoji-picker__lists {
+                        height: 7em;
+                    }
                 }
             }
         }
-    }
 
-    .converse-embedded {
-        converse-emoji-dropdown {
-            .dropdown-menu {
-                min-width: 20em;
+        &.converse-embedded {
+            converse-emoji-dropdown {
+                .dropdown-menu {
+                    min-width: 20em;
+                }
             }
         }
-    }
 
-    .converse-fullscreen {
-        converse-emoji-dropdown {
-            .dropdown-menu {
-                min-width: 22em;
-            }
-        }
-        .chatbox {
-            .toggle-smiley {
+        &.converse-fullscreen {
+            converse-emoji-dropdown {
+                .dropdown-menu {
+                    min-width: 22em;
+                }
             }
-            converse-emoji-picker {
-                .emoji-picker__lists {
-                    height: 12em;
+            .chatbox {
+                .toggle-smiley {
+                }
+                converse-emoji-picker {
+                    .emoji-picker__lists {
+                        height: 12em;
+                    }
                 }
             }
         }

sass/_headline.scss

@@ -31,18 +31,22 @@
     }
 }
 
-#conversejs.converse-fullscreen {
-    .chatbox.headlines {
-        .box-flyout {
-            background-color: var(--headline-head-color);
-        }
-        .chat-head {
-            &.chat-head-chatbox {
-                background-color: var(--headline-head-color);
+#conversejs {
+    converse-chats {
+        &.converse-fullscreen {
+            .chatbox.headlines {
+                .box-flyout {
+                    background-color: var(--headline-head-color);
+                }
+                .chat-head {
+                    &.chat-head-chatbox {
+                        background-color: var(--headline-head-color);
+                    }
+                }
+                .flyout {
+                    border-color: var(--headline-head-color);
+                }
             }
         }
-        .flyout {
-            border-color: var(--headline-head-color);
-        }
     }
 }

sass/_messages.scss

@@ -385,7 +385,7 @@
     }
 
     converse-chats {
-        .converse-overlayed {
+        &.converse-overlayed {
             .message {
                 &.chat-msg {
                     &.chat-msg--followup {

sass/_minimized_chats.scss

@@ -1,91 +1,93 @@
-converse-chats {
-    .converse-overlayed {
-        #minimized-chats {
-            order: 100;
+#conversejs {
+    converse-chats {
+        &.converse-overlayed {
+            #minimized-chats {
+                order: 100;
 
-            width: var(--minimized-chats-width);
-            margin-bottom: 0;
-            border-top-left-radius: var(--chatbox-border-radius);
-            border-top-right-radius: var(--chatbox-border-radius);
-            color: var(--inverse-link-color);
-            margin-right: var(--chat-gutter);
-            padding: 0;
-
-            .badge {
-                bottom: 8px;
-                border: 1px solid var(--overlayed-badge-color);
-            }
-
-            #toggle-minimized-chats {
+                width: var(--minimized-chats-width);
+                margin-bottom: 0;
                 border-top-left-radius: var(--chatbox-border-radius);
                 border-top-right-radius: var(--chatbox-border-radius);
-                background-color: var(--link-color);
-                padding: 1em 0 0 0;
-                text-align: center;
-                color: white;
-                white-space: nowrap;
-                overflow-y: hidden;
-                text-overflow: ellipsis;
-                display: block;
-                height: 45px;
-                width: 9em;
-            }
+                color: var(--inverse-link-color);
+                margin-right: var(--chat-gutter);
+                padding: 0;
 
-            a.restore-chat {
-                cursor: pointer;
-                padding: 1px 0 1px 5px;
-                color: var(--chat-head-text-color);
-                line-height: 15px;
-                display: block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                &:hover {
-                    text-decoration: none;
+                .badge {
+                    bottom: 8px;
+                    border: 1px solid var(--overlayed-badge-color);
                 }
-            }
 
-            a.restore-chat:visited {
-                color: var(--chat-head-text-color);
-            }
+                #toggle-minimized-chats {
+                    border-top-left-radius: var(--chatbox-border-radius);
+                    border-top-right-radius: var(--chatbox-border-radius);
+                    background-color: var(--link-color);
+                    padding: 1em 0 0 0;
+                    text-align: center;
+                    color: white;
+                    white-space: nowrap;
+                    overflow-y: hidden;
+                    text-overflow: ellipsis;
+                    display: block;
+                    height: 45px;
+                    width: 9em;
+                }
 
-            .minimized-chats-flyout {
-                flex-direction: column-reverse;
-                bottom: 45px;
-                width: var(--minimized-chats-width);
+                a.restore-chat {
+                    cursor: pointer;
+                    padding: 1px 0 1px 5px;
+                    color: var(--chat-head-text-color);
+                    line-height: 15px;
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    &:hover {
+                        text-decoration: none;
+                    }
+                }
 
-                .chat-head {
-                    min-height: 0;
-                    padding: 0.3em;
-                    border-radius: var(--chatbox-border-radius);
-                    height: 35px;
-                    margin-bottom: 0.2em;
-                    width: 100%;
-                    max-width: 9em;
-                    flex-wrap: nowrap;
+                a.restore-chat:visited {
+                    color: var(--chat-head-text-color);
                 }
-                &.minimized {
-                    height: auto;
+
+                .minimized-chats-flyout {
+                    flex-direction: column-reverse;
+                    bottom: 45px;
+                    width: var(--minimized-chats-width);
+
+                    .chat-head {
+                        min-height: 0;
+                        padding: 0.3em;
+                        border-radius: var(--chatbox-border-radius);
+                        height: 35px;
+                        margin-bottom: 0.2em;
+                        width: 100%;
+                        max-width: 9em;
+                        flex-wrap: nowrap;
+                    }
+                    &.minimized {
+                        height: auto;
+                    }
                 }
-            }
 
-            .unread-message-count {
-                font-weight: bold;
-                background-color: white;
-                border: 1px solid;
-                text-shadow: 1px 1px 0 var(--text-shadow-color);
-                color: var(--warning-color);
-                border-radius: 5px;
-                padding: 2px 4px;
-                font-size: 16px;
-                text-align: center;
-                position: absolute;
-                right: 116px;
-                bottom: 10px;
-            }
-            .unread-message-count-hidden,
-            .chat-head-message-count-hidden {
-                display: none;
+                .unread-message-count {
+                    font-weight: bold;
+                    background-color: white;
+                    border: 1px solid;
+                    text-shadow: 1px 1px 0 var(--text-shadow-color);
+                    color: var(--warning-color);
+                    border-radius: 5px;
+                    padding: 2px 4px;
+                    font-size: 16px;
+                    text-align: center;
+                    position: absolute;
+                    right: 116px;
+                    bottom: 10px;
+                }
+                .unread-message-count-hidden,
+                .chat-head-message-count-hidden {
+                    display: none;
+                }
             }
         }
     }

sass/_toolbar.scss

@@ -189,7 +189,7 @@
     }
 
     converse-chats {
-        .converse-overlayed  {
+        &.converse-overlayed  {
             .chat-toolbar {
                 li {
                     .toolbar-menu {

src/components/converse.js

@@ -1,4 +1,5 @@
 import tpl_converse from "../templates/converse.js";
+import { api } from '@converse/headless/core';
 import { CustomElement } from './element.js';
 
 
@@ -14,6 +15,11 @@ class ConverseRoot extends CustomElement {
     render () { // eslint-disable-line class-methods-use-this
         return tpl_converse();
     }
+
+    connectedCallback () {
+        super.connectedCallback();
+        this.classList.add(`converse-${api.settings.get('view_mode')}`);
+    }
 }
 
 customElements.define('converse-root', ConverseRoot);