From 4938d1b6de59b2cf5e444bb96b30d8c6dbc8acca Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Wed, 30 Aug 2017 13:53:12 -0700
Subject: [PATCH] fix(contact-list): update avatar sizing

With interfaceConfig.SHOW_CONTACTLIST_AVATARS, the avatars in the
contact list are too big and will overlap each other. Constrain
the avatar sizes and make each contact a little taller to better
space each out.
---
 css/_contact_list.scss | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/css/_contact_list.scss b/css/_contact_list.scss
index 7a69c733b..8f4682601 100644
--- a/css/_contact_list.scss
+++ b/css/_contact_list.scss
@@ -23,14 +23,16 @@
 #contacts {
 
     >li {
-        display: block;
+        align-items: center;
+        border-radius: 3px;
+        color: $baseLight;
+        display: flex;
+        font-size: 14px;
+        height: 36px;
         list-style-type: none;
+        padding: 0 10%;
         text-align: left;
         white-space: nowrap;
-        color: $baseLight;
-        font-size: 16px;
-        padding: 0 10%;
-        height: 27px;
 
         &:hover,
         &:active {
@@ -38,13 +40,15 @@
         }
 
         > p {
-            display: inline-block;
-            vertical-align: middle;
-            margin: 0px;
-            width: 100%;
-            line-height: 1.5em;
-            text-overflow: ellipsis;
             overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .avatar {
+            cursor: pointer;
+            height: 24px;
+            margin: 0 8px 0 4px;
+            width: 24px;
         }
     }
 }