From fa0eed84064bd3b2f3dea5d11608f36bee8dfdcb Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Wed, 9 Oct 2024 17:37:54 -0700
Subject: [PATCH 1/2] [PAY-3499] Fix overflow on ChatListBlastItem with long
 names

---
 .../components/ChatListBlastItem.tsx          | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/pages/chat-page/components/ChatListBlastItem.tsx b/packages/web/src/pages/chat-page/components/ChatListBlastItem.tsx
index 2fc4b16333d..6fd485e4f04 100644
--- a/packages/web/src/pages/chat-page/components/ChatListBlastItem.tsx
+++ b/packages/web/src/pages/chat-page/components/ChatListBlastItem.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 
 import { useChatBlastAudienceContent } from '@audius/common/hooks'
 import { formatCount } from '@audius/common/utils'
-import { Flex, IconTowerBroadcast, IconUser, Text } from '@audius/harmony'
+import { Box, Flex, IconTowerBroadcast, IconUser, Text } from '@audius/harmony'
 import { ChatBlast } from '@audius/sdk'
 import cn from 'classnames'
 
@@ -41,21 +41,15 @@ export const ChatListBlastItem = (props: ChatListBlastItemProps) => {
       onClick={handleClick}
       className={cn(styles.root, { [styles.active]: isCurrentChat })}
     >
-      <Flex gap='s' css={{ overflow: 'hidden' }}>
+      <Flex row gap='s' w='100%'>
         <IconTowerBroadcast size='l' color='default' />
-        <Text size='l' strength='strong' css={{ whiteSpace: 'nowrap' }}>
-          {chatBlastTitle}
-        </Text>
+        <Box css={{ flexShrink: 0 }}>
+          <Text size='l' strength='strong'>
+            {chatBlastTitle}
+          </Text>
+        </Box>
         {contentTitle ? (
-          <Text
-            size='l'
-            color='subdued'
-            css={{
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis'
-            }}
-          >
+          <Text size='l' color='subdued' ellipses css={{ display: 'block' }}>
             {contentTitle}
           </Text>
         ) : null}

From b121fc46eb7440725510f08ec9afebec1233e948 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Wed, 9 Oct 2024 17:47:50 -0700
Subject: [PATCH 2/2] [PAY-3500] Fix truncation on ChatBlastHeader

---
 .../web/src/pages/chat-page/components/ChatBlastHeader.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/pages/chat-page/components/ChatBlastHeader.tsx b/packages/web/src/pages/chat-page/components/ChatBlastHeader.tsx
index d627cbae7b0..26fcd6a9f04 100644
--- a/packages/web/src/pages/chat-page/components/ChatBlastHeader.tsx
+++ b/packages/web/src/pages/chat-page/components/ChatBlastHeader.tsx
@@ -37,15 +37,16 @@ export const ChatBlastHeader = ({ chat }: { chat: ChatBlast }) => {
           <Artwork
             src={audienceContentType === 'track' ? trackArtwork : albumArtwork}
             w='48px'
+            css={{ flexShrink: 0 }}
           />
         ) : null}
         <Flex column gap='xs' alignItems='flex-start'>
           <Flex gap='s' alignItems='center'>
             <IconTowerBroadcast size='m' color='default' />
-            <Text variant='title' size='l' ellipses>
+            <Text variant='title' size='l'>
               {chatBlastSecondaryTitle}
             </Text>
-            <Text variant='title' size='l' color='subdued' ellipses>
+            <Text variant='title' size='l' color='subdued' maxLines={1}>
               {contentTitle}
             </Text>
           </Flex>