LogalDeveloper/owncast
0
Fork 0
Code Activity

Issue#2662: Make Followers Content Fit With overflow ending in ellipsis (#2678)

Browse Source 
* 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>
This commit is contained in:
Prachurjya
2023-02-05 10:15:31 +05:30
committed by GitHub
parent 0e9e20ad29
commit 7ff71985ea
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/ui/followers/SingleFollower/SingleFollower.module.scss
View File

@@ -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) {

12
web/components/ui/followers/SingleFollower/SingleFollower.tsx
View File

@@ -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>