Fixes #2064 (for real this time)

sass/_messages.scss

@@ -133,6 +133,11 @@
                 align-items: stretch;
                 margin-left: 0.5rem;
                 width: calc(100% - var(--message-avatar-width));
+                &:hover {
+                    .btn--standalone {
+                        opacity: 1;
+                    }
+                }
             }
 
             .chat-msg__content--me {
@@ -156,11 +161,10 @@
                 display: flex;
                 flex-direction: row;
                 justify-content: space-between;
-                &:hover {
-                    .btn--standalone {
-                        opacity: 1;
-                    }
-                }
+            }
+
+            converse-chat-message-body {
+                display: inline-block;
             }
 
             .chat-msg__message {
@@ -341,6 +345,7 @@
             }
 
             .chat-msg__receipt {
+                margin-left: 0.5em;
                 margin-right: 0.5em;
                 color: var(--message-receipt-color);
             }

src/components/message.js

@@ -15,6 +15,7 @@ import { renderAvatar } from './../templates/directives/avatar';
 const { Strophe } = converse.env;
 const u = converse.env.utils;
 
+const i18n_edited = __('This message has been edited');
 const i18n_show = __('Show more');
 const i18n_show_less = __('Show less');
 const i18n_uploading = __('Uploading file:');
@@ -212,6 +213,7 @@ class Message extends CustomElement {
     }
 
     renderMessageText () {
+        const is_groupchat_message = (this.message_type === 'groupchat');
         const tpl_spoiler_hint = html`
             <div class="chat-msg__spoiler-hint">
                 <span class="spoiler-hint">${this.spoiler_hint}</span>
@@ -224,13 +226,17 @@ class Message extends CustomElement {
         return html`
             ${ this.is_spoiler ? tpl_spoiler_hint : '' }
             ${ this.subject ? html`<div class="chat-msg__subject">${this.subject}</div>` : '' }
-            <converse-chat-message-body
-                .model="${this.model}"
-                ?is_me_message="${this.is_me_message}"
-                ?is_only_emojis="${this.is_only_emojis}"
-                ?is_spoiler="${this.is_spoiler}"
-                ?is_spoiler_visible="${this.is_spoiler_visible}"
-                text="${this.model.getMessageText()}"></converse-chat-message-body>
+            <span>
+                <converse-chat-message-body
+                    .model="${this.model}"
+                    ?is_me_message="${this.is_me_message}"
+                    ?is_only_emojis="${this.is_only_emojis}"
+                    ?is_spoiler="${this.is_spoiler}"
+                    ?is_spoiler_visible="${this.is_spoiler_visible}"
+                    text="${this.model.getMessageText()}"></converse-chat-message-body>
+                ${ (this.received && !this.is_me_message && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
+                ${ (this.edited) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${this.showMessageVersionsModal}></i>` : '' }
+            </span>
             ${ this.oob_url ? html`<div class="chat-msg__media">${u.getOOBURLMarkup(_converse, this.oob_url)}</div>` : '' }
             <div class="chat-msg__error">${ this.error_text || this.error }</div>
         `;

src/templates/chat_message.js

@@ -2,12 +2,11 @@ import { html } from "lit-html";
 import { __ } from '@converse/headless/i18n';
 import { renderAvatar } from './../templates/directives/avatar';
 
-const i18n_edited = __('This message has been edited');
+
 const i18n_new_messages = __('New messages');
 
 
 export default (o) => {
-    const is_groupchat_message = (o.message_type === 'groupchat');
     return html`
         ${ o.is_first_unread ? html`<div class="message date-separator"><hr class="separator"><span class="separator-text">${ i18n_new_messages }</span></div>` : '' }
         <div class="message chat-msg ${ o.getExtraMessageClasses() }"
@@ -30,8 +29,6 @@ export default (o) => {
                 <div class="chat-msg__body chat-msg__body--${o.message_type} ${o.received ? 'chat-msg__body--received' : '' } ${o.is_delayed ? 'chat-msg__body--delayed' : '' }">
                     <div class="chat-msg__message">
                         ${ o.is_retracted ? o.renderRetraction() : o.renderMessageText() }
-                        ${ (o.received && !o.is_me_message && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
-                        ${ (o.edited) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${o.showMessageVersionsModal}></i>` : '' }
                     </div>
                     <converse-message-actions
                         .chatview=${o.chatview}