Fixes test cases

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -48,8 +48,8 @@
       top: 0;
 
       .button__content {
-        display: inline-flex;
         align-items: center;
+        display: inline-flex;
       }
     }
 

app/javascript/dashboard/components/widgets/Avatar.vue

@@ -43,12 +43,14 @@ export default {
   },
   computed: {
     style() {
+      const fontSize = Math.floor(this.size / 2.5);
+      const lineHeight = this.size + Math.floor(this.size / 20);
       let style = {
         width: `${this.size}px`,
         height: `${this.size}px`,
         borderRadius: this.rounded ? '50%' : 0,
-        lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
+        lineHeight: `${Math.max(lineHeight, 12)}px`,
-        fontSize: `${Math.floor(this.size / 2.5)}px`,
+        fontSize: `${Math.max(fontSize, 8)}px`,
       };
 
       if (this.backgroundColor) {

app/javascript/dashboard/components/widgets/Thumbnail.spec.js

@@ -11,12 +11,13 @@ describe(`when there are NO errors loading the thumbnail`, () => {
       data() {
         return {
           imgError: false,
+          hasImageLoaded: true,
         };
       },
     });
     expect(wrapper.find('#image').exists()).toBe(true);
     const avatarComponent = wrapper.findComponent(Avatar);
-    expect(avatarComponent.exists()).toBe(false);
+    expect(avatarComponent.isVisible()).toBe(false);
   });
 });
 
@@ -29,12 +30,13 @@ describe(`when there ARE errors loading the thumbnail`, () => {
       data() {
         return {
           imgError: true,
+          hasImageLoaded: true,
         };
       },
     });
-    expect(wrapper.find('#image').exists()).toBe(false);
+    expect(wrapper.find('#image').isVisible()).toBe(false);
     const avatarComponent = wrapper.findComponent(Avatar);
-    expect(avatarComponent.exists()).toBe(true);
+    expect(avatarComponent.isVisible()).toBe(true);
   });
 });
 

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -24,14 +24,6 @@
         </h4>
         <div class="conversation--metadata">
           <inbox-name v-if="showInboxName" :inbox="inbox" />
-          <thumbnail
-            v-if="showAssignee && assignee.name"
-            v-tooltip.top-end="assignee.name"
-            class="assignee-avatar"
-            :src="assignee.thumbnail"
-            :username="assignee.name"
-            size="16px"
-          />
         </div>
       </div>
       <div class="message-details">
@@ -82,6 +74,14 @@
           <span class="timestamp">
             {{ dynamicTime(chat.timestamp) }}
           </span>
+          <thumbnail
+            v-if="showAssignee && assignee.name"
+            v-tooltip.top-end="assignee.name"
+            class="assignee-avatar"
+            :src="assignee.thumbnail"
+            :username="assignee.name"
+            size="14px"
+          />
         </div>
       </div>
     </div>
@@ -298,6 +298,10 @@ export default {
     line-height: var(--space-normal);
     margin-left: var(--space-small);
   }
+
+  .assignee-avatar {
+    margin-left: var(--space-small);
+  }
 }
 .details-meta {
   display: flex;
@@ -342,10 +346,6 @@ export default {
     margin-right: 0;
     max-width: 12rem;
   }
-
-  .assignee-avatar {
-    margin-left: var(--space-micro);
-  }
 }
 
 .message--attachment-icon {