CSS: more tweaks to cut off vertical zalgo text

src/shared/chat/templates/message-text.js

@@ -30,7 +30,7 @@ export default (el) => {
     return html`
         ${ el.model.get('is_spoiler') ? tpl_spoiler_hint : '' }
         ${ el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : '' }
-        <span>
+        <span class="chat-msg__body--wrapper">
             <converse-chat-message-body
                 class="chat-msg__text ${el.model.get('is_only_emojis') ? 'chat-msg__text--larger' : ''} ${spoiler_classes}"
                 .model="${el.model}"

src/shared/styles/messages.scss

@@ -156,7 +156,7 @@
             }
 
             converse-chat-message-body {
-                display: inline;
+                overflow-y: hidden; // Hide zalgo text that overflows vertically
             }
 
             .chat-msg__message {
@@ -165,8 +165,8 @@
                 flex-direction: column;
                 width: 100%;
                 overflow-wrap: break-word;
-                span {
-                    overflow-y: hidden;
+                .chat-msg__body--wrapper {
+                    display: flex;
                 }
             }