From 3d302b7dbd9895c1a47fefd59a455a612c2fffa2 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 23 Mar 2023 19:11:08 -0700
Subject: [PATCH] Fix text overlaping. Closes #2866

---
 .../SingleFollower/SingleFollower.module.scss       |  7 +++++--
 .../ui/followers/SingleFollower/SingleFollower.tsx  | 13 +++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss b/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
index f53bf4d31..ece249d66 100644
--- a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
+++ b/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
@@ -38,10 +38,13 @@
   }
 
   .avatar {
-    height: 50px;
-    width: 50px;
     border-color: rgba(0, 0, 0, 0.3);
     border-width: 1px;
     border-style: solid;
+    background-color: var(--theme-color-background-main);
+
+    span {
+      font-size: 1.6rem;
+    }
   }
 }
diff --git a/web/components/ui/followers/SingleFollower/SingleFollower.tsx b/web/components/ui/followers/SingleFollower/SingleFollower.tsx
index 4cb35bcff..3a7f46a21 100644
--- a/web/components/ui/followers/SingleFollower/SingleFollower.tsx
+++ b/web/components/ui/followers/SingleFollower/SingleFollower.tsx
@@ -12,15 +12,12 @@ export const SingleFollower: FC<SingleFollowerProps> = ({ follower }) => (
   <div className={cn([styles.follower, 'followers-follower'])}>
     <a href={follower.link} target="_blank" rel="noreferrer">
       <Row wrap={false}>
-        <Col span={4}>
-          <Avatar
-            src={follower.image}
-            alt="Avatar"
-            className={styles.avatar}
-            icon={<img src="/logo" alt="Logo" />}
-          />
+        <Col span={6}>
+          <Avatar src={follower.image} size="large" alt="Avatar" className={styles.avatar}>
+            {follower.username.charAt(0).toUpperCase()}
+          </Avatar>
         </Col>
-        <Col span={18}>
+        <Col span={16}>
           <Row className={styles.name}>
             <Typography.Text ellipsis>
               {follower.name || follower.username.split('@', 2)[0]}