Chat: fix various overflow issues

app/soapbox/features/chats/components/chat.tsx

@@ -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'
     >
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
-        <HStack alignItems='center' space={2}>
-          <Avatar src={chat.account?.avatar} size={40} />
+        <HStack alignItems='center' space={2} className='overflow-hidden'>
+          <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
 
-          <Stack alignItems='start'>
-            <div className='flex items-center space-x-1 flex-grow'>
-              <Text weight='bold' size='sm' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
+          <Stack alignItems='start' className='overflow-hidden'>
+            <div className='flex items-center space-x-1 flex-grow w-full'>
+              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
               {chat.account?.verified && <VerificationBadge />}
             </div>
 
             {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}
               </Text>
             )}
@@ -43,7 +43,12 @@ const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
               <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>