wip

src/components/chat/chat.vue

@@ -22,12 +22,14 @@
               :fallback-user="currentUser"
             />
           </div>
-          <ChatAvatar
-            :users="chatParticipants"
-            :fallback-user="currentUser"
-            width="35px"
-            height="35px"
-          />
+          <div style="visibility: hidden">
+            <ChatAvatar
+              :users="chatParticipants"
+              :fallback-user="currentUser"
+              width="23px"
+              height="23px"
+            />
+          </div>
         </div>
         <template>
           <div

src/components/chat_avatar/chat_avatar.vue

@@ -102,6 +102,9 @@
 }
 
 .direct-conversation-avatar {
+  display: inline-block;
+  vertical-align: middle;
+
   &.single-user {
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);

src/components/chat_message/chat_message.scss

@@ -37,7 +37,14 @@
 
     .avatar-wrapper {
       margin-right: 10px;
+      // margin-top: 13px;
+      top: 5px;
       width: 32px;
+      position: relative;
+
+      // img {
+      //   position: absolute;
+      // }
     }
 
     .link-preview, .attachments {

src/components/chat_title/chat_title.js

@@ -1,11 +1,15 @@
 import Vue from 'vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import ChatAvatar from '../chat_avatar/chat_avatar.vue'
 import { mapState } from 'vuex'
 
 const USER_LIMIT = 10
 
 export default Vue.component('direct-conversation-title', {
   name: 'ChatTitle',
+  components: {
+    ChatAvatar
+  },
   props: [
     'users', 'fallbackUser'
   ],

src/components/chat_title/chat_title.vue

@@ -4,6 +4,12 @@
     class="direct-conversation-title"
     :title="title"
   >
+    <ChatAvatar
+      :users="otherUsers"
+      :fallback-user="currentUser"
+      width="23px"
+      height="23px"
+    />
     <span
       v-for="(user, index) in otherUsersTruncated"
       :key="user.id"