Fix converse-muc-occupants width

And move styles into more appropriate files.

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

@@ -1,147 +1,121 @@
 .conversejs {
-    converse-muc.chatroom {
-
-        converse-icon {
-            svg {
-                fill: var(--muc-color);
-            }
-        }
-
-        .chat-status--avatar {
-            background: var(--background-color);
-            border: 2px solid var(--background-color);
-            font-size: 0.6rem;
-            margin-top: 0;
-            margin-left: -0.3em;
-            margin-bottom: -2em;
-            padding: 0.1em;
-
-            svg {
-                display: flex;
-            }
-        }
-
-        .badge-groupchat {
-            background-color: var(--muc-color);
-        }
-
-        .box-flyout {
-
-            .occupants {
+    converse-muc-occupants {
+        width: 100%;
+
+        .occupants {
+            display: flex;
+            height: 100%;
+            width: 100%;
+            flex-direction: column;
+            justify-content: space-between;
+            overflow-y: visible;
+            overflow-x: auto;
+
+            .occupants-header--title {
                 display: flex;
-                height: 100%;
-                width: 100%;
-                flex-direction: column;
-                justify-content: space-between;
-                overflow-y: visible;
-                overflow-x: auto;
+                flex-direction: row;
+                padding: 0.5em;
 
-                .occupants-header--title {
-                    display: flex;
-                    flex-direction: row;
-                    padding: 0.5em;
-
-                    .occupants-heading {
-                        padding-left: 0;
-                        margin-right: 0.5em;
-                    }
-
-                    .hide-occupants {
-                        align-self: flex-end;
-                        cursor: pointer;
-                        font-size: var(--font-size-small);
-                    }
+                .occupants-heading {
+                    padding-left: 0;
+                    margin-right: 0.5em;
                 }
 
-                .fa-user-plus {
-                    margin-right: 0.25em;
+                .hide-occupants {
+                    align-self: flex-end;
+                    cursor: pointer;
+                    font-size: var(--font-size-small);
                 }
+            }
 
-                .suggestion-box{
-                    ul {
-                        padding: 0;
-                        li {
-                            padding: 0.5em;
-                        }
+            .fa-user-plus {
+                margin-right: 0.25em;
+            }
+
+            .suggestion-box{
+                ul {
+                    padding: 0;
+                    li {
+                        padding: 0.5em;
                     }
                 }
-                .items-list {
-                    padding: 0;
-                    margin-bottom: 0.5em;
-                    overflow-x: hidden;
+            }
+            .items-list {
+                padding: 0;
+                margin-bottom: 0.5em;
+                overflow-x: hidden;
+                overflow-y: auto;
+                list-style: none;
+
+                &.occupant-list {
+                    padding: 0.5em;
                     overflow-y: auto;
-                    list-style: none;
-
-                    &.occupant-list {
-                        padding: 0.5em;
-                        overflow-y: auto;
-                        flex-basis: 0;
-                        flex-grow: 1;
+                    flex-basis: 0;
+                    flex-grow: 1;
+                }
+                .list-item {
+                    height: auto;
+                    cursor: default;
+                    font-size: var(--font-size-small);
+                    padding: 0.25em 0.25em 0.25em 0;
+                    text-overflow: ellipsis;
+                    .fa {
+                        margin-right: 0.5em;
+                    }
+                    &.feature {
+                        font-size: var(--font-size-tiny);
                     }
-                    .list-item {
-                        height: auto;
-                        cursor: default;
-                        font-size: var(--font-size-small);
-                        padding: 0.25em 0.25em 0.25em 0;
-                        text-overflow: ellipsis;
-                        .fa {
+                    &.occupant {
+                        cursor: pointer;
+                        .msgs-indicator {
+                            margin-left: -3em;
                             margin-right: 0.5em;
+                            margin-top: -0.25em;
+                            position: absolute;
+                            font-size: xx-small;
                         }
-                        &.feature {
-                            font-size: var(--font-size-tiny);
-                        }
-                        &.occupant {
-                            cursor: pointer;
-                            .msgs-indicator {
-                                margin-left: -3em;
-                                margin-right: 0.5em;
-                                margin-top: -0.25em;
-                                position: absolute;
-                                font-size: xx-small;
+
+                        .occupant-nick-badge {
+                            display: flex;
+                            justify-content: space-between;
+                            flex-wrap: nowrap;
+                            align-items: center;
+                            gap: 0.25rem;
+                            overflow-x: hidden;
+
+                            .occupant-nick {
+                                flex-grow: 2;
+                                overflow-x: hidden;
+                                text-overflow: ellipsis;
                             }
 
-                            .occupant-nick-badge {
+                            .occupant-badges {
                                 display: flex;
-                                justify-content: space-between;
-                                flex-wrap: nowrap;
-                                align-items: center;
+                                justify-content: flex-end;
+                                flex-wrap: wrap;
+                                flex-direction: row;
+                                flex-shrink: 1;
                                 gap: 0.25rem;
-                                overflow-x: hidden;
-
-                                .occupant-nick {
-                                    flex-grow: 2;
-                                    overflow-x: hidden;
-                                    text-overflow: ellipsis;
-                                }
-
-                                .occupant-badges {
-                                    display: flex;
-                                    justify-content: flex-end;
-                                    flex-wrap: wrap;
-                                    flex-direction: row;
-                                    flex-shrink: 1;
-                                    gap: 0.25rem;
 
-                                    span {
-                                        height: 1.6em;
-                                    }
-                                }
-
-                                .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;
+                                span {
+                                    height: 1.6em;
                                 }
                             }
 
-                            div.row.g-0{
-                                flex-wrap: nowrap;
-                                min-height: 1.5em;
-                            }
-                            .badge {
-                                margin-bottom: 0.125rem;
+                            .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{
+                            flex-wrap: nowrap;
+                            min-height: 1.5em;
+                        }
+                        .badge {
+                            margin-bottom: 0.125rem;
+                        }
                     }
                 }
             }

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

@@ -5,7 +5,7 @@
 @import "./muc-forms.scss";
 
 .conversejs {
-    .chatroom {
+    converse-muc.chatroom {
         width: var(--chatroom-width);
         @media screen and (max-height: $mobile-landscape-height){
             width: var(--mobile-chat-width);
@@ -14,6 +14,30 @@
             width: var(--mobile-chat-width);
         }
 
+        converse-icon {
+            svg {
+                fill: var(--muc-color);
+            }
+        }
+
+        .chat-status--avatar {
+            background: var(--background-color);
+            border: 2px solid var(--background-color);
+            font-size: 0.6rem;
+            margin-top: 0;
+            margin-left: -0.3em;
+            margin-bottom: -2em;
+            padding: 0.1em;
+
+            svg {
+                display: flex;
+            }
+        }
+
+        .badge-groupchat {
+            background-color: var(--muc-color);
+        }
+
         .box-flyout {
             background-color: var(--background-color);
             overflow-y: hidden;