diff --git a/src/plugins/muc-views/templates/mep-message.js b/src/plugins/muc-views/templates/mep-message.js
index 2d233e7fa..9fca6b7a0 100644
--- a/src/plugins/muc-views/templates/mep-message.js
+++ b/src/plugins/muc-views/templates/mep-message.js
@@ -20,7 +20,8 @@ export default (el) => {
render_styling
text=${el.model.getMessageText()}>
- ${ el.model.get('reason') ? html`${el.model.get('reason')}
` : `` }
+ ${ el.model.get('reason') ?
+ html`
` : `` }
`}
+
+
+ -
+
+
+
+ ${msg}
+
+ ${reason}
+
+
+
+
+
+ `);
+ _converse.connection._dataRecv(mock.createRequest(message));
+ await u.waitUntil(() => model.messages.length === 1);
+
+ const view = await u.waitUntil(() => _converse.chatboxviews.get(muc_jid));
+ await u.waitUntil(() => view.querySelectorAll('.chat-info').length === 1, 1000);
+ expect(view.querySelector('.chat-info__message converse-rich-text').textContent.trim()).toBe(msg);
+ expect(view.querySelector('.reason converse-rich-text').innerHTML.replace(//g, '').trim()).toBe(
+ 'Check out https://conversejs.org');
+ }));
+
it("can be retracted by a moderator",
mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
diff --git a/src/shared/components/styles/rich-text.scss b/src/shared/components/styles/rich-text.scss
index 14e3d8af8..07f50c02e 100644
--- a/src/shared/components/styles/rich-text.scss
+++ b/src/shared/components/styles/rich-text.scss
@@ -1,3 +1,9 @@
converse-rich-text {
display: block;
}
+
+.reason {
+ converse-rich-text {
+ display: inline-block;
+ }
+}