Fix alignment of close button for MUC sidebar

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

@@ -25,9 +25,11 @@
                 min-width: 20%;
                 flex: 0 0 25%;
 
-                .occupants-header {
+                .occupants-header--title {
                     display: flex;
-                    flex-direction: column;
+                    flex-direction: row;
+                    margin-bottom: 0.5em;
+
                     .hide-occupants {
                         align-self: flex-end;
                         cursor: pointer;
@@ -35,18 +37,12 @@
                     }
                 }
 
-                .occupants-header--title {
-                    margin-top: 0.5em;
-                    margin-bottom: 0.5em;
-                    display: flex;
-                    flex-direction: row;
-                }
-
                 .fa-user-plus {
                     margin-right: 0.25em;
                 }
 
                 .occupants-heading {
+                    width: 100%;
                     font-family: var(--heading-font);
                     color: var(--groupchats-header-color-dark);
                     padding-left: 0;

src/plugins/muc-views/templates/muc-sidebar.js

@@ -7,11 +7,11 @@ export default (o) => {
     const i18n_participants = __('Participants');
     return html`
         <div class="occupants-header">
-            <i class="hide-occupants" @click=${o.closeSidebar}>
-                <converse-icon color="var(--subdued-color)" class="fa fa-times" size="1em"></converse-icon>
-            </i>
             <div class="occupants-header--title">
                 <span class="occupants-heading">${i18n_participants}</span>
+                <i class="hide-occupants" @click=${o.closeSidebar}>
+                    <converse-icon class="fa fa-times" size="1em"></converse-icon>
+                </i>
             </div>
         </div>
         <div class="dragresize dragresize-occupants-left"></div>