Move CSS fixes before merge

sass/_autocomplete.scss

@@ -124,18 +124,16 @@
         background: var(--completion-normal-color);
         color: inherit;
     }
+}
 
-    converse-chats {
-        &.converse-fullscreen {
+#conversejs.converse-fullscreen {
     .suggestion-box__results--above {
         bottom: 4.5em;
     }
 }
 
-        &.converse-overlayed {
+#conversejs.converse-overlayed {
     .suggestion-box__results--above {
         bottom: 3.5em;
     }
 }
-    }
-}

sass/_chatbox.scss

@@ -184,7 +184,7 @@
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            background-color: var(--chat-head-color);
+            background-color: var(--chat-textarea-background-color);
             border-bottom-left-radius: var(--chatbox-border-radius);
             border-bottom-right-radius: var(--chatbox-border-radius);
 
@@ -468,8 +468,7 @@
 }
 
 @include media-breakpoint-down(sm) {
-    #conversejs {
-        converse-chats.converse-overlayed {
+    #conversejs.converse-overlayed {
         > .row {
             flex-direction: column;
             &.no-gutters {
@@ -478,7 +477,6 @@
         }
     }
 }
-}
 
 
 #conversejs {

sass/_controlbox.scss

@@ -95,7 +95,6 @@
         }
 
         .box-flyout {
-            margin-left: 0;
             background-color: var(--controlbox-pane-background-color);
         }
 
@@ -576,6 +575,9 @@
         }
 
         &.converse-fullscreen {
+            #controlbox {
+                margin-left: -15px;
+            }
             .controlbox-panes {
                 padding-top: 2em;
             }

sass/_roster.scss

@@ -9,6 +9,7 @@
     // XXX: FIXME
     height: calc(100% - 70px);
 
+
     /* Custom addition for CSP */
     #online-count {
         display: none;
@@ -55,6 +56,15 @@
         overflow-y: auto;
         color: var(--text-color);
 
+        converse-roster-contact {
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            display: flex;
+            justify-content: space-between;
+        }
+
         .group-toggle {
             font-family: var(--heading-font);
             display: block;
@@ -133,9 +143,6 @@
                 }
 
                 .contact-name {
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
                     padding: 0;
                     margin: 0;
                     max-width: 85%;
@@ -154,7 +161,6 @@
                 /* Make this difference */
             }
             a, span {
-                overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
             }

sass/_variables.scss

@@ -1,7 +1,7 @@
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
-#conversejs, #conversejs-bg, .converse-fullscreen {
+#conversejs, #conversejs-bg, body.converse-fullscreen {
     --subdued-color: #A8ABA1;
 
     --green: #3AA569;

src/plugins/rosterview/templates/roster_item.js

@@ -7,7 +7,7 @@ export default  (o) => {
    const i18n_chat = __('Click to chat with %1$s (XMPP address: %2$s)', o.display_name, o.jid);
    const i18n_remove = __('Click to remove %1$s as a contact', o.display_name);
    return html`
-   <a class="list-item-link cbox-list-item open-chat w-100 ${ o.num_unread ? 'unread-msgs' : '' }" title="${i18n_chat}" href="#" @click=${o.openChat}>
+   <a class="list-item-link cbox-list-item open-chat ${ o.num_unread ? 'unread-msgs' : '' }" title="${i18n_chat}" href="#" @click=${o.openChat}>
       ${ renderAvatar(o.getAvatarData()) }
       <span class="${o.status_icon}" title="${o.desc_status}"></span>
       ${ o.num_unread ? html`<span class="msgs-indicator">${ o.num_unread }</span>` : '' }