Fix positioning of the message limit indicator

src/shared/chat/styles/toolbar.scss

@@ -1,40 +1,38 @@
 .conversejs {
+    converse-chat-toolbar {
+        converse-message-limit-indicator {
+            padding: 0.75em 0.5em;
+        }
 
-    converse-chat-toolbar.btn-toolbar {
-        background-color: var(--background-color);
-        box-sizing: border-box;
-        width: 100%;
-        justify-content: space-between;
-        margin-bottom: 1px; // So that bottom border on toolbar buttons is visible
+        .btn-toolbar {
+            background-color: var(--background-color);
+            box-sizing: border-box;
+            width: 100%;
+            justify-content: space-between;
+            margin-bottom: 1px; // So that bottom border on toolbar buttons is visible
 
-        .toolbar-buttons {
-            .message-limit {
-                padding: 0.5em;
-                font-weight: bold;
+            .btn {
+                padding: 0.25em 0.5em !important;
             }
-        }
 
-        .btn {
-            padding: 0.25em 0.5em !important;
-        }
-
-        .send-button {
-            color: var(--background-color);
-            border-radius: 0;
-        }
+            .send-button {
+                color: var(--background-color);
+                border-radius: 0;
+            }
 
-        .fa, .fa:hover,
-        .far, .far:hover,
-        .fas, .fas:hover {
-            color: var(--background-color);
-            font-size: var(--font-size-large);
-            svg {
-                fill: var(--background-color);
+            .fa, .fa:hover,
+            .far, .far:hover,
+            .fas, .fas:hover {
+                color: var(--background-color);
+                font-size: var(--font-size-large);
+                svg {
+                    fill: var(--background-color);
+                }
+            }
+            .unencrypted a,
+            .unencrypted {
+                color: var(--text-color);
             }
-        }
-        .unencrypted a,
-        .unencrypted {
-            color: var(--text-color);
         }
     }
 
@@ -55,6 +53,7 @@
         converse-chat-toolbar {
             color: var(--chat-color);
             background-color: var(--background-color);
+            .message-limit,
             .fas, .fas:hover,
             .far, .far:hover,
             .fa, .fa:hover {

src/shared/chat/templates/toolbar.js

@@ -1,6 +1,7 @@
-import { __ } from 'i18n';
 import { html } from 'lit';
 import { until } from 'lit/directives/until.js';
+import { __ } from 'i18n';
+import { api } from '@converse/headless';
 
 function tplSendButton() {
     const i18n_send_message = __('Send the message');
@@ -13,8 +14,12 @@ function tplSendButton() {
  * @param {import('../toolbar').ChatToolbar} el
  */
 export default (el) => {
+    const message_limit = api.settings.get('message_limit');
     return html`
         <span class="btn-group toolbar-buttons">${until(el.getButtons(), '')}</span>
-        ${el.show_send_button ? tplSendButton() : ''}
+        <span>
+            ${ message_limit ? html`<converse-message-limit-indicator .model="${el.model}"/>` : '' }
+            ${el.show_send_button ? tplSendButton() : ''}
+        </span>
     `;
 };

src/shared/chat/toolbar.js

@@ -79,14 +79,6 @@ export class ChatToolbar extends CustomElement {
             );
         }
 
-        const message_limit = api.settings.get('message_limit');
-        if (message_limit) {
-            buttons.push(html`
-                <converse-message-limit-indicator .model=${this.model} class="right">
-                </converse-message-limit-indicator>`
-            );
-        }
-
         if (this.show_spoiler_button) {
             buttons.push(this.getSpoilerButton());
         }