From 7ff71985ea6c2afecfbb8f49d4d27e62872317d2 Mon Sep 17 00:00:00 2001
From: Prachurjya <43103185+prachurjya15@users.noreply.github.com>
Date: Sun, 5 Feb 2023 10:15:31 +0530
Subject: [PATCH] Issue#2662: Make Followers Content Fit With overflow ending
 in ellipsis (#2678)

* Issue#2662: Make Followers Content Fit With overflow ending in ellipsis

* Prettified Code!

* Fixed Linting Issue

* Resolved line break issue

---------

Co-authored-by: prachurjya15 <prachurjya15@users.noreply.github.com>
---
 .../SingleFollower/SingleFollower.module.scss        |  2 +-
 .../ui/followers/SingleFollower/SingleFollower.tsx   | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss b/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
index 9af7a89e7..816fc91aa 100644
--- a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
+++ b/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
@@ -27,7 +27,7 @@
   .account {
     color: var(--theme-color-components-text-on-light);
     word-break: break-all;
-    line-height: 0.9rem;
+    line-height: 1rem;
   }
 
   @include screen(mobile) {
diff --git a/web/components/ui/followers/SingleFollower/SingleFollower.tsx b/web/components/ui/followers/SingleFollower/SingleFollower.tsx
index e245b749a..a28e0af80 100644
--- a/web/components/ui/followers/SingleFollower/SingleFollower.tsx
+++ b/web/components/ui/followers/SingleFollower/SingleFollower.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Col, Row } from 'antd';
+import { Avatar, Col, Row, Typography } from 'antd';
 import React, { FC } from 'react';
 import cn from 'classnames';
 import { Follower } from '../../../../interfaces/follower';
@@ -17,9 +17,13 @@ export const SingleFollower: FC<SingleFollowerProps> = ({ follower }) => (
             <img src="/logo" alt="Logo" className={styles.placeholder} />
           </Avatar>
         </Col>
-        <Col>
-          <Row className={styles.name}>{follower.name}</Row>
-          <Row className={styles.account}>{follower.username}</Row>
+        <Col span={18}>
+          <Row className={styles.name}>
+            <Typography.Text ellipsis>{follower.name}</Typography.Text>
+          </Row>
+          <Row className={styles.account}>
+            <Typography.Text ellipsis>{follower.username}</Typography.Text>
+          </Row>
         </Col>
       </Row>
     </a>