bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chat: fix various overflow issues

Browse source
This commit is contained in:
Alex Gleason 2022-08-31 12:04:33 -05:00
parent 2a5a43d914
commit 7fc732d0d0
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/soapbox/features/chats/components/chat.tsx
View file

@ -20,17 +20,17 @@ const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800' className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800'
> >
<HStack alignItems='center' justifyContent='between' space={2} className='w-full'> <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2} className='overflow-hidden'>
<Avatar src={chat.account?.avatar} size={40} /> <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
<Stack alignItems='start'> <Stack alignItems='start' className='overflow-hidden'>
<div className='flex items-center space-x-1 flex-grow'> <div className='flex items-center space-x-1 flex-grow w-full'>
<Text weight='bold' size='sm' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text> <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
{chat.account?.verified && <VerificationBadge />} {chat.account?.verified && <VerificationBadge />}
</div> </div>
{chat.last_message?.content && ( {chat.last_message?.content && (
<Text align='left' size='sm' weight='medium' theme='muted' truncate className='max-w-[200px]'> <Text align='left' size='sm' weight='medium' theme='muted' truncate className='w-full'>
{chat.last_message?.content} {chat.last_message?.content}
</Text> </Text>
)} )}
@ -43,7 +43,12 @@ const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
<div className='w-2 h-2 rounded-full bg-secondary-500' /> <div className='w-2 h-2 rounded-full bg-secondary-500' />
)} )}
<RelativeTimestamp timestamp={chat.last_message.created_at} size='sm' /> <RelativeTimestamp
timestamp={chat.last_message.created_at}
align='right'
size='xs'
truncate
/>
</HStack> </HStack>
)} )}
</HStack> </HStack>