Allow social chat events to fit content. Use text fallback in avatar. Closes #2719

web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss

@@ -4,9 +4,6 @@
   border-style: solid;
   padding: 10px 10px;
   border-radius: 15px;
-  height: 85px;
-  width: 300px;
-  overflow: hidden;
   background-color: var(--theme-color-background-main);
 
   &:hover {
@@ -19,6 +16,12 @@
     border-color: rgba(0, 0, 0, 0.3);
     border-width: 1px;
     border-style: solid;
+    font-size: 1.8rem;
+  }
+
+  .avatarColumn {
+    max-width: 75px;
+    min-width: 75px;
   }
 
   .body {
@@ -34,10 +37,10 @@
   }
 
   .icon {
-    position: relative;
+    position: absolute;
     width: 25px;
     height: 25px;
-    top: -20px;
+    top: 40px;
     left: 40px;
     border-color: var(--theme-color-background-main);
     border-width: 2px;
@@ -46,9 +49,4 @@
     background-size: cover;
     background-position: center;
   }
-
-  .placeholder {
-    width: 100%;
-    height: 100%;
-  }
 }

web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx

@@ -42,3 +42,25 @@ Repost.args = {
     link: 'https://mastodon.social/@james',
   },
 };
+
+export const LongAccountName = Template.bind({});
+LongAccountName.args = {
+  message: {
+    type: 'FEDIVERSE_ENGAGEMENT_REPOST',
+    body: 'james shared this stream with their followers.',
+    title: 'littlejimmywilliams@technology.biz.net.org.technology.gov',
+    image: 'https://mastodon.social/avatars/original/missing.png',
+    link: 'https://mastodon.social/@james',
+  },
+};
+
+export const InvalidAvatarImage = Template.bind({});
+InvalidAvatarImage.args = {
+  message: {
+    type: 'FEDIVERSE_ENGAGEMENT_REPOST',
+    body: 'james shared this stream with their followers.',
+    title: 'james@mastodon.social',
+    image: 'https://xx.xx/avatars/original/missing.png',
+    link: 'https://mastodon.social/@james',
+  },
+};

web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx

@@ -42,10 +42,11 @@ export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
     <div className={cn([styles.follower, 'chat-message_social'])}>
       <a href={link} target="_blank" rel="noreferrer">
         <Row wrap={false}>
-          <Col span={6}>
+          <Col span={6} className={styles.avatarColumn}>
-            <Avatar src={image} alt="Avatar" className={styles.avatar}>
+            <Avatar src={image} alt="Avatar" className={styles.avatar} size="large">
-              <img src="/logo" alt="Logo" className={styles.placeholder} />
+              {title.charAt(0).toUpperCase()}
             </Avatar>
+
             <Icon className={styles.icon} />
           </Col>
           <Col>