Don't nest chat-msg__txt inside `converse-chat-message-body`

instead just set the classes directly on the custom element

As far as I can tell, this fixes #1346 (or it was fixed already)

sass/_messages.scss

@@ -164,7 +164,7 @@
             }
 
             converse-chat-message-body {
-                display: inline-block;
+                display: inline;
             }
 
             .chat-msg__message {
@@ -193,7 +193,6 @@
             .chat-msg__text {
                 color: var(--message-text-color);
                 padding: 0;
-                width: 100%;
                 white-space: pre-wrap;
                 word-wrap: break-word;
                 word-break: break-word;

src/components/message-body.js

@@ -1,15 +1,11 @@
 import { CustomElement } from './element.js';
 import { renderBodyText } from './../templates/directives/body';
-import { html } from 'lit-element';
 
 
 class MessageBody extends CustomElement {
 
     static get properties () {
         return {
-            is_only_emojis: { type: Boolean },
-            is_spoiler: { type: Boolean },
-            is_spoiler_visible: { type: Boolean },
             is_me_message: { type: Boolean },
             model: { type: Object },
             text: { type: String },
@@ -17,13 +13,8 @@ class MessageBody extends CustomElement {
     }
 
     render () {
-        const spoiler_classes = this.is_spoiler ? `spoiler ${this.is_spoiler_visible ? '' : 'collapsed'}` : '';
-        return html`
-            <div class="chat-msg__text ${this.is_only_emojis ? 'chat-msg__text--larger' : ''} ${spoiler_classes}"
-                >${renderBodyText(this)}</div>
-        `;
+        return renderBodyText(this);
     }
-
 }
 
 customElements.define('converse-chat-message-body', MessageBody);

src/components/message.js

@@ -223,11 +223,13 @@ class Message extends CustomElement {
                 </a>
             </div>
         `;
+        const spoiler_classes = this.is_spoiler ? `spoiler ${this.is_spoiler_visible ? '' : 'collapsed'}` : '';
         return html`
             ${ this.is_spoiler ? tpl_spoiler_hint : '' }
             ${ this.subject ? html`<div class="chat-msg__subject">${this.subject}</div>` : '' }
             <span>
                 <converse-chat-message-body
+                    class="chat-msg__text ${this.is_only_emojis ? 'chat-msg__text--larger' : ''} ${spoiler_classes}"
                     .model="${this.model}"
                     ?is_me_message="${this.is_me_message}"
                     ?is_only_emojis="${this.is_only_emojis}"