wip

src/components/chat/chat.scss

@@ -44,6 +44,12 @@
         position: -webkit-sticky;
         position: sticky;
 
+        .button-icon {
+          display: flex;
+          align-content: center;
+          align-items: center;
+        }
+
         .go-back-button {
           cursor: pointer;
           margin-right: 0.7em;
@@ -66,8 +72,9 @@
           text-overflow: ellipsis;
           white-space: nowrap;
           flex-shrink: 0;
-          max-width: 70%;
+          max-width: 80%;
           display: grid;
+          display: flex;
         }
       }
 

src/components/chat/chat.vue

@@ -10,16 +10,17 @@
           ref="header"
           class="panel-heading direct-conversation-view-heading mobile-hidden"
         >
-          <a
+          <!-- <a
             class="go-back-button"
             @click="goBack"
-          >
-            <i class="button-icon icon-left-open" />
-          </a>
+          > -->
+            <i class="button-icon icon-left-open" @click="goBack" />
+          <!-- </a> -->
           <div class="title text-center">
             <ChatTitle
               :users="chatParticipants"
               :fallback-user="currentUser"
+              :with-avatar="true"
             />
           </div>
           <div style="">
@@ -29,13 +30,13 @@
               width="23px"
               height="23px"
             /> -->
-            <a
+            <!-- <a
               class=""
               style="margin-right: 0.3em;"
               @click="goBack"
-            >
+            > -->
               <i class="button-icon icon-info-circled" />
-            </a>
+            <!-- </a> -->
           </div>
         </div>
         <template>

src/components/chat_title/chat_title.js

@@ -11,7 +11,7 @@ export default Vue.component('direct-conversation-title', {
     ChatAvatar
   },
   props: [
-    'users', 'fallbackUser'
+    'users', 'fallbackUser', 'withAvatar'
   ],
   computed: {
     ...mapState({

src/components/chat_title/chat_title.vue

@@ -5,11 +5,13 @@
     :title="title"
   >
     <ChatAvatar
+      v-if="withAvatar"
       :users="otherUsers"
       :fallback-user="currentUser"
       width="23px"
       height="23px"
     />
+    <span v-if="withAvatar" style="margin-right: 0.5em" />
     <span
       v-for="(user, index) in otherUsersTruncated"
       :key="user.id"