Don't indent followup messages when messages don't have avatars

sass/_messages.scss

@@ -318,7 +318,7 @@
                 .chat-msg__avatar {
                     display: none;
                 }
-                .chat-msg__content {
+                &.chat-msg--with-avatar .chat-msg__content {
                     margin-left: 2.75rem;
                     width: 100%;
                 }

spec/muc_messages.js

@@ -416,7 +416,7 @@ describe("A Groupchat Message", function () {
         expect(view.model.messages.last().occupant.get('affiliation')).toBe('owner');
         expect(view.model.messages.last().occupant.get('role')).toBe('moderator');
         expect(view.el.querySelectorAll('.chat-msg').length).toBe(1);
-        expect(sizzle('.chat-msg', view.el).pop().classList.value.trim()).toBe('message chat-msg groupchat moderator owner');
+        expect(sizzle('.chat-msg', view.el).pop().classList.value.trim()).toBe('message chat-msg groupchat chat-msg--with-avatar moderator owner');
         let presence = $pres({
                 to:'romeo@montague.lit/orchard',
                 from:'lounge@montague.lit/romeo',
@@ -442,7 +442,7 @@ describe("A Groupchat Message", function () {
         expect(view.model.messages.last().occupant.get('affiliation')).toBe('member');
         expect(view.model.messages.last().occupant.get('role')).toBe('participant');
         expect(view.el.querySelectorAll('.chat-msg').length).toBe(2);
-        expect(sizzle('.chat-msg', view.el).pop().classList.value.trim()).toBe('message chat-msg groupchat participant member');
+        expect(sizzle('.chat-msg', view.el).pop().classList.value.trim()).toBe('message chat-msg groupchat chat-msg--with-avatar participant member');
 
         presence = $pres({
                 to:'romeo@montague.lit/orchard',
@@ -465,7 +465,7 @@ describe("A Groupchat Message", function () {
         expect(occupant.get('affiliation')).toBe('owner');
         expect(occupant.get('role')).toBe('moderator');
         expect(view.el.querySelectorAll('.chat-msg').length).toBe(3);
-        await u.waitUntil(() => sizzle('.chat-msg', view.el).pop().classList.value.trim() === 'message chat-msg groupchat moderator owner');
+        await u.waitUntil(() => sizzle('.chat-msg', view.el).pop().classList.value.trim() === 'message chat-msg groupchat chat-msg--with-avatar moderator owner');
 
         const add_events = view.model.occupants._events.add.length;
         msg = $msg({

src/components/message.js

@@ -127,10 +127,11 @@ class Message extends CustomElement {
         const is_groupchat_message = (this.message_type === 'groupchat');
         return html`
             ${ this.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 ${this.message_type} ${this.getExtraMessageClasses()}
-                    ${ this.is_me_message ? 'chat-msg--action' : '' }
-                    ${this.isFollowup() ? 'chat-msg--followup' : ''}"
-                    data-isodate="${this.time}" data-msgid="${this.msgid}" data-from="${this.from}" data-encrypted="${this.is_encrypted}">
+            <div class="message chat-msg ${ this.getExtraMessageClasses() }"
+                 data-isodate="${this.time}"
+                 data-msgid="${this.msgid}"
+                 data-from="${this.from}"
+                 data-encrypted="${this.is_encrypted}">
 
                 ${ this.shouldShowAvatar() ? renderAvatar(this.getAvatarData()) : '' }
                 <div class="chat-msg__content chat-msg__content--${this.sender} ${this.is_me_message ? 'chat-msg__content--action' : ''}">
@@ -215,12 +216,16 @@ class Message extends CustomElement {
             this.is_encrypted === prev_model.get('is_encrypted');
     }
 
-
     getExtraMessageClasses () {
         const extra_classes = [
-            ...(this.is_delayed ? ['delayed'] : []),
-            ...(this.is_retracted ? ['chat-msg--retracted'] : [])
-        ];
+            this.isFollowup() ? 'chat-msg--followup' : null,
+            this.is_delayed ? 'delayed' : null,
+            this.is_me_message ? 'chat-msg--action' : null,
+            this.is_retracted ? 'chat-msg--retracted' : null,
+            this.message_type,
+            this.shouldShowAvatar() ? 'chat-msg--with-avatar' : null,
+        ].map(c => c);
+
         if (this.message_type === 'groupchat') {
             this.occupant_role && extra_classes.push(this.occupant_role);
             this.occupant_affiliation && extra_classes.push(this.occupant_affiliation);