From 473a0277021d48f356b0a570138ab8a8292bd89c Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 17 Dec 2021 11:01:40 -0800
Subject: [PATCH] Fix avatar styling

---
 src/Avatar.module.css | 14 +++++++++++++-
 src/Facepile.jsx      |  4 ++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/Avatar.module.css b/src/Avatar.module.css
index 0fe6ff5..374024d 100644
--- a/src/Avatar.module.css
+++ b/src/Avatar.module.css
@@ -6,6 +6,7 @@
   justify-content: center;
   pointer-events: none;
   font-weight: 600;
+  overflow: hidden;
 }
 
 .avatar img {
@@ -18,13 +19,24 @@
   fill: #ffffff;
 }
 
-.sm {
+.avatar span {
+  padding-top: 1px;
+}
+
+.xs {
   width: 22px;
   height: 22px;
   border-radius: 22px;
   font-size: 14px;
 }
 
+.sm {
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+  font-size: 15px;
+}
+
 .md {
   width: 36px;
   height: 36px;
diff --git a/src/Facepile.jsx b/src/Facepile.jsx
index 3071d8d..c87fff6 100644
--- a/src/Facepile.jsx
+++ b/src/Facepile.jsx
@@ -13,7 +13,7 @@ export function Facepile({ className, participants, ...rest }) {
       {participants.slice(0, 3).map((member, i) => (
         <Avatar
           key={member.userId}
-          size="sm"
+          size="xs"
           fallback={member.name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
           style={{ left: i * 22 }}
@@ -22,7 +22,7 @@ export function Facepile({ className, participants, ...rest }) {
       {participants.length > 3 && (
         <Avatar
           key="additional"
-          size="sm"
+          size="xs"
           fallback={`+${participants.length - 3}`}
           className={styles.avatar}
           style={{ left: 3 * 22 }}