Fix Fediverse chat action overflows (#4783)

* Fixed #4773

* Prettier'd and Eslinted the changes

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

@@ -1,3 +1,10 @@
+.containerColumn {
+  position: relative;
+  max-width: 100%;
+  min-width: 1px;
+  display: grid;
+}
+
 .followerPadding {
   padding: 0.5em;
 }
@@ -39,9 +46,13 @@
   }
 
   .account {
+    text-overflow: ellipsis;
     font-family: var(--theme-text-display-font-family);
     font-weight: 600;
     color: var(--theme-color-components-text-on-light);
+    overflow: hidden;
+    display: inline-block;
+    white-space: nowrap;
   }
 
   .icon {

web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx

@@ -50,7 +50,7 @@ export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
 
               <Icon className={styles.icon} />
             </Col>
-            <Col>
+            <Col className={styles.containerColumn}>
               <Row className={styles.account}>{title}</Row>
               <Row className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
             </Col>