interface: fix long group names

This commit is contained in:
Logan Allen 2021-02-08 14:10:09 -06:00
parent 6bb4062150
commit 5112937f59

View File

@ -13,8 +13,8 @@ interface GroupSummaryProps {
export function GroupSummary(props: GroupSummaryProps) { export function GroupSummary(props: GroupSummaryProps) {
const { channelCount, memberCount, metadata, children } = props; const { channelCount, memberCount, metadata, children } = props;
return ( return (
<Col maxWidth="300px" gapY="4"> <Col maxWidth="600px" gapY="4">
<Row gapX="2"> <Row gapX="2" width="100%">
<MetadataIcon <MetadataIcon
borderRadius="1" borderRadius="1"
border="1" border="1"
@ -22,9 +22,14 @@ export function GroupSummary(props: GroupSummaryProps) {
width="40px" width="40px"
height="40px" height="40px"
metadata={metadata} metadata={metadata}
flexShrink="0"
/> />
<Col justifyContent="space-between"> <Col justifyContent="space-between" flexGrow="1" overflow="hidden">
<Text fontSize="1">{metadata.title}</Text> <Text
fontSize="1"
textOverflow="ellipsis"
whiteSpace="nowrap"
overflow="hidden">{metadata.title}</Text>
<Row gapX="2" justifyContent="space-between"> <Row gapX="2" justifyContent="space-between">
<Text fontSize="1" gray> <Text fontSize="1" gray>
{memberCount} participants {memberCount} participants
@ -35,7 +40,17 @@ export function GroupSummary(props: GroupSummaryProps) {
</Row> </Row>
</Col> </Col>
</Row> </Row>
{metadata.description && <Text fontSize="1">{metadata.description}</Text>} <Row width="100%">
{metadata.description &&
<Text
width="100%"
fontSize="1"
textOverflow="ellipsis"
overflow="hidden">
{metadata.description}
</Text>
}
</Row>
{children} {children}
</Col> </Col>
); );