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