fix(followers): improve layout of single follower. Closes #2926

web/components/ui/followers/SingleFollower/SingleFollower.module.scss

@@ -6,45 +6,41 @@
   border-style: solid;
   padding: 10px 10px;
   border-radius: 15px;
-  height: 75px;
-  font-size: 0.8rem;
-  margin: 5px;
-  color: var(--theme-color-components-text-on-light);
-
-  .name {
-    font-weight: 600;
+  background-color: var(--theme-color-background-main);
+  margin: 0.5em;
   font-size: 1rem;
-    color: var(--theme-color-components-text-on-light);
-    display: inline-block;
 
-    text-overflow: ellipsis;
-    overflow: hidden;
-    width: calc(85%);
-    white-space: nowrap;
+  &:hover {
+    border-color: var(--theme-text-link);
+  }
+
+  .avatar {
+    height: 60px;
+    width: 60px;
+    border-color: rgba(0, 0, 0, 0.3);
+    border-width: 1px;
+    border-style: solid;
+    font-size: 1.8rem;
+  }
+
+  .avatarColumn {
+    max-width: 75px;
+    min-width: 75px;
   }
 
   .account {
     color: var(--theme-color-components-text-on-light);
-    word-break: break-all;
-    line-height: 1rem;
+    text-overflow: ellipsis;
+    line-height: 1.2rem;
+
+    p {
+      margin: 0;
+    }
   }
 
-  @include screen(mobile) {
-    margin: auto;
-  }
-
-  &:hover {
-    border-color: var(--theme-color-action);
-  }
-
-  .avatar {
-    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;
-    }
+  .username {
+    font-family: var(--theme-text-display-font-family);
+    font-weight: 600;
+    color: var(--theme-color-components-text-on-light);
   }
 }

web/components/ui/followers/SingleFollower/SingleFollower.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Col, Row, Typography } from 'antd';
+import { Avatar, Col, Row } from 'antd';
 import React, { FC } from 'react';
 import cn from 'classnames';
 import { Follower } from '../../../../interfaces/follower';
@@ -12,20 +12,21 @@ 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={6}>
-          <Avatar src={follower.image} size="large" alt="Avatar" className={styles.avatar}>
-            {follower.username.charAt(0).toUpperCase()}
+        <Col span={6} className={styles.avatarColumn}>
+          <Avatar
+            src={follower.image}
+            alt={(follower.name || follower.username).charAt(0).toUpperCase()}
+            className={styles.avatar}
+            size="large"
+          >
+            {(follower.name || follower.username).charAt(0).toUpperCase()}
           </Avatar>
         </Col>
-        <Col span={16}>
-          <Row className={styles.name}>
-            <Typography.Text ellipsis>
+        <Col>
+          <Row className={styles.username}>
             {follower.name || follower.username.split('@', 2)[0]}
-            </Typography.Text>
-          </Row>
-          <Row className={styles.account}>
-            <Typography.Text ellipsis>{follower.username}</Typography.Text>
           </Row>
+          <Row className={styles.account}>{follower.username}</Row>
         </Col>
       </Row>
     </a>