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 { .account {
color: var(--theme-color-components-text-on-light); color: var(--theme-color-components-text-on-light);
word-break: break-all; word-break: break-all;
line-height: 0.9rem; line-height: 1rem;
} }
@include screen(mobile) { @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 React, { FC } from 'react';
import cn from 'classnames'; import cn from 'classnames';
import { Follower } from '../../../../interfaces/follower'; import { Follower } from '../../../../interfaces/follower';
@@ -17,9 +17,13 @@ export const SingleFollower: FC<SingleFollowerProps> = ({ follower }) => (
<img src="/logo" alt="Logo" className={styles.placeholder} /> <img src="/logo" alt="Logo" className={styles.placeholder} />
</Avatar> </Avatar>
</Col> </Col>
<Col> <Col span={18}>
<Row className={styles.name}>{follower.name}</Row> <Row className={styles.name}>
<Row className={styles.account}>{follower.username}</Row> <Typography.Text ellipsis>{follower.name}</Typography.Text>
</Row>
<Row className={styles.account}>
<Typography.Text ellipsis>{follower.username}</Typography.Text>
</Row>
</Col> </Col>
</Row> </Row>
</a> </a>