Occupant actions: move it to the right.

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

@@ -108,23 +108,33 @@
 
                             .occupant-nick-badge {
                                 display: flex;
-                                justify-content: flex-start;
-                                flex-wrap: wrap;
+                                justify-content: space-between;
+                                flex-wrap: nowrap;
                                 align-items: center;
+                                gap: 0.25rem;
+
+                                .occupant-nick {
+                                    flex-grow: 2;
+                                }
 
                                 .occupant-badges {
                                     display: flex;
                                     justify-content: flex-end;
                                     flex-wrap: wrap;
                                     flex-direction: row;
-
-                                    margin-left: auto; // this tricks align the item to the right.
+                                    flex-shrink: 1;
+                                    gap: 0.25rem;
 
                                     span {
                                         height: 1.6em;
-                                        margin-right: 0.25rem;
                                     }
                                 }
+
+                                .occupant-actions {
+                                    // We must specify the position, else there is a bug:
+                                    // clicking on an action would close the dropdown without triggering the action.
+                                    position: static;
+                                }
                             }
 
                             div.row.g-0{

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

@@ -54,7 +54,7 @@ async function tplActionButtons (o) {
     }
 
     return html`<converse-dropdown
-        class="btn btn--transparent btn--standalone dropdown-toggle dropdown-toggle--no-caret"
+        class="occupant-actions chatbox-btn"
         .items=${items}
     ></converse-dropdown>`;
 }
@@ -109,9 +109,6 @@ export default (o, chat) => {
                           title="${occupant_title(o)}"
                           @click=${chat.onOccupantClicked}
                           style="${getAuthorStyle(o)}">${o.getDisplayName()}</span>
-                    ${
-                        until(tplActionButtons(o))
-                    }
                     <span class="occupant-badges">
                         ${ (affiliation === "owner") ? html`<span class="badge badge-groupchat">${i18n_owner}</span>` : '' }
                         ${ (affiliation === "admin") ? html`<span class="badge badge-info">${i18n_admin}</span>` : '' }
@@ -119,6 +116,9 @@ export default (o, chat) => {
                         ${ (role === "moderator") ? html`<span class="badge badge-info">${i18n_moderator}</span>` : '' }
                         ${ (role === "visitor") ? html`<span class="badge badge-secondary">${i18n_visitor}</span>`  : '' }
                     </span>
+                    ${
+                        until(tplActionButtons(o))
+                    }
                 </div>
             </div>
         </li>