Codeclimate fixes

app/javascript/dashboard/assets/scss/_foundation-custom.scss

@@ -59,10 +59,10 @@ $badge-size: var(--space-normal);
 $label-badge-size: var(--space-slab);
 
 .badge {
+  border-radius: var(--border-radius-normal);
+  font-weight: var(--font-weight-bold);
   height: min-content;
   line-height: 1;
-  font-weight: var(--font-weight-bold);
-  border-radius: var(--border-radius-normal);
 
   &.small {
     font-size: var(--font-size-nano);
@@ -76,19 +76,19 @@ $label-badge-size: var(--space-slab);
 
 
   &.secondary {
-    min-width: unset;
     background: var(--s-75);
     color: var(--s-500);
     font-weight: var(--font-weight-bold);
+    min-width: unset;
   }
 }
 
 .badge--label,
 .badge--icon {
-  display: inline-flex;
-  border-radius: var(--border-radius-small);
-  margin-right: var(--space-smaller);
   background: var(--s-100);
+  border-radius: var(--border-radius-small);
+  display: inline-flex;
+  margin-right: var(--space-smaller);
 }
 
 .badge--icon {
@@ -104,8 +104,8 @@ $label-badge-size: var(--space-slab);
 
 .badge--label {
   height: $label-badge-size;
-  min-width: $label-badge-size;
   margin-left: var(--space-smaller);
+  min-width: $label-badge-size;
 }
 
 

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -13,10 +13,10 @@
 .conversation {
   @include flex;
   @include flex-shrink;
-  padding: 0 var(--space-small);
-  margin: var(--space-small);
   border-radius: var(--border-radius-large);
   cursor: pointer;
+  margin: var(--space-small);
+  padding: 0 var(--space-small);
   position: relative;
 
   &.active {
@@ -49,6 +49,7 @@
 
   .conversation--message {
     color: $color-body;
+    flex-grow: 0;
     font-size: $font-size-small;
     font-weight: $font-weight-normal;
     height: $space-medium;
@@ -59,7 +60,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     width: auto;
-    flex-grow: 0;
   }
 
   &.unread-chat {

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

@@ -21,8 +21,8 @@
   a,
   .button {
     @include position(relative, 1px null null null);
-    height: var(--space-large);
     border-bottom: 2px solid transparent;
+    height: var(--space-large);
     transition: border-color .15s $swift-ease-out-function;
   }
 

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

@@ -23,19 +23,10 @@
           {{ currentContact.name }}
         </h4>
         <div class="conversation--metadata">
-          <span
-            v-if="showInboxName"
-            :class="computedInboxClass"
-            class="badge small secondary badge--icon"
-          >
-            <fluent-icon
-              class="svg-icon"
-              :icon="computedInboxClass"
-              size="12"
-            />
-          </span>
+          <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"
@@ -295,7 +286,7 @@ export default {
   justify-content: space-between;
 
   .timestamp {
-    color: var(--s-600);
+    color: var(--s-500);
     font-size: var(--font-size-micro);
     font-weight: var(--font-weight-normal);
     line-height: var(--space-normal);
@@ -349,6 +340,8 @@ export default {
     font-weight: var(--font-weight-medium);
     line-height: var(--space-slab);
     padding: var(--space-micro) 0 var(--space-micro) 0;
+    margin-bottom: 0;
+    margin-right: var(--space-smaller);
   }
 
   .assignee-avatar {