Add a more .converse-app class to use instead of .converse-chatboxes

Author: jcbrand

src/plugins/chatboxviews/index.js

@@ -29,7 +29,7 @@ converse.plugins.add('converse-chatboxviews', {
                 const extra_classes = api.settings.get('singleton') ? ['converse-singleton'] : [];
                 extra_classes.push(`converse-${api.settings.get('view_mode')}`);
                 return html`<converse-app-chat
-                    class="converse-chatboxes row justify-content-start g-0 ${extra_classes.join(' ')}"
+                    class="converse-app converse-chatboxes row justify-content-start g-0 ${extra_classes.join(' ')}"
                 ></converse-app-chat>`;
             },
             renderControlbox: () => html`

src/plugins/chatboxviews/styles/chats.scss

@@ -2,62 +2,6 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
 
-.conversejs {
-    &.converse-fullscreen {
-        converse-app-container {
-            display: flex;
-            justify-content: flex-start;
-            height: 100%;
-            position: fixed;
-            bottom: 0;
-            right: 0;
-            left: 0;
-        }
-    }
-}
-
-
-.conversejs {
-    converse-app-chat {
-        &.converse-overlayed {
-            > .row {
-                flex-direction: row-reverse;
-            }
-            &.converse-chatboxes {
-                z-index: 1031; // One more than bootstrap navbar
-                position: fixed;
-                bottom: 0;
-                right: 0;
-            }
-        }
-
-        &.converse-fullscreen {
-            flex-wrap: nowrap;
-            &.converse-chatboxes {
-                width: 100%;
-                position: sticky;
-            }
-        }
-
-        &.converse-embedded {
-            bottom: auto;
-            height: 100%; // When embedded, it fills the containing element
-            position: relative;
-            right: auto;
-            width: 100%;
-
-            &.converse-chatboxes {
-                z-index: 1031; // One more than bootstrap navbar
-                position: inherit;
-                flex-wrap: nowrap;
-                bottom: auto;
-                height: 100%;
-                width: 100%;
-            }
-        }
-    }
-}
-
 @include media-breakpoint-down(sm) {
     .conversejs {
         converse-app-chat {

src/plugins/rootview/styles/root.scss

@@ -18,3 +18,49 @@ converse-root {
         position: relative;
     }
 }
+
+.conversejs {
+    &.converse-fullscreen {
+        converse-app-container {
+            display: flex;
+            justify-content: flex-start;
+            height: 100%;
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            left: 0;
+        }
+    }
+}
+
+.conversejs {
+    .converse-app {
+        &.converse-overlayed {
+            > .row {
+                flex-direction: row-reverse;
+            }
+            z-index: 1031; // One more than bootstrap navbar
+            position: fixed;
+            bottom: 0;
+            right: 0;
+        }
+
+        &.converse-fullscreen {
+            flex-wrap: nowrap;
+            width: 100%;
+            position: sticky;
+        }
+
+        &.converse-embedded {
+            bottom: auto;
+            flex-wrap: nowrap;
+            height: 100%;
+            height: 100%; // When embedded, it fills the containing element
+            position: inherit;
+            position: relative;
+            right: auto;
+            width: 100%;
+            z-index: 1031; // One more than bootstrap navbar
+        }
+    }
+}

src/plugins/todo/plugin.js

@@ -9,13 +9,12 @@ converse.plugins.add('converse-app-todo', {
                 const extra_classes = api.settings.get('singleton') ? ['converse-singleton'] : [];
                 extra_classes.push(`converse-${api.settings.get('view_mode')}`);
                 return html`<converse-app-todo
-                    class="converse-chatboxes row justify-content-start g-0 ${extra_classes.join(' ')}"
+                    class="converse-app row justify-content-start g-0 ${extra_classes.join(' ')}"
                 ></converse-app-todo>`;
             },
             renderControlbox: () => {
                 return html`<converse-todo-lists></converse-todo-lists>`;
             },
-            active: false,
         });
     },
 });