[PAY-3483] Update 'ChatListBlastItem' UI on smaller screens (#10057)

Co-authored-by: Farid Salau <farid@Mac.attlocal.net>
AudiusProject · Oct 15, 2024 · 6401b5c · 6401b5c
1 parent 058e233
commit 6401b5c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/packages/web/src/pages/chat-page/components/ChatListBlastItem.tsx b/packages/web/src/pages/chat-page/components/ChatListBlastItem.tsx
@@ -41,20 +41,30 @@ export const ChatListBlastItem = (props: ChatListBlastItemProps) => {
       onClick={handleClick}
       className={cn(styles.root, { [styles.active]: isCurrentChat })}
     >
-      <Flex row gap='s' w='100%'>
+      <Flex row gap='s' w='100%' className={styles.headingContainer}>
         <IconTowerBroadcast size='l' color='default' />
-        <Box css={{ flexShrink: 0 }}>
+        <Box css={{ flexShrink: 0 }} className={styles.messagePreview}>
           <Text size='l' strength='strong'>
             {chatBlastTitle}
           </Text>
         </Box>
         {contentTitle ? (
-          <Text size='l' color='subdued' ellipses css={{ display: 'block' }}>
+          <Text
+            size='l'
+            color='subdued'
+            ellipses
+            css={{ display: 'block' }}
+            className={styles.messagePreview}
+          >
             {contentTitle}
           </Text>
         ) : null}
       </Flex>
-      <Flex justifyContent='space-between' w='100%'>
+      <Flex
+        justifyContent='space-between'
+        w='100%'
+        className={styles.messagePreview}
+      >
         <Text variant='label' textTransform='capitalize' color='subdued'>
           {messages.audience}
         </Text>

diff --git a/packages/web/src/pages/chat-page/components/ChatListItem.module.css b/packages/web/src/pages/chat-page/components/ChatListItem.module.css
@@ -55,6 +55,10 @@
 }
 
 @media (max-width: 1080px) {
+  .headingContainer {
+    justify-content: center;
+  }
+
   .messagePreview,
   .userText,
   .unreadIndicatorTag {