fix: Fix various UI text wrapping and overflow issues (#34774)

app/javascript/mastodon/components/avatar_group.tsx

@@ -7,10 +7,16 @@ import classNames from 'classnames';
 
 export const AvatarGroup: React.FC<{
   compact?: boolean;
+  avatarHeight?: number;
   children: React.ReactNode;
-}> = ({ children, compact = false }) => (
+}> = ({ children, compact = false, avatarHeight }) => (
   <div
     className={classNames('avatar-group', { 'avatar-group--compact': compact })}
+    style={
+      avatarHeight
+        ? ({ '--avatar-height': `${avatarHeight}px` } as React.CSSProperties)
+        : undefined
+    }
   >
     {children}
   </div>

app/javascript/mastodon/components/more_from_author.jsx

@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import { IconLogo } from 'mastodon/components/logo';
-import { AuthorLink } from 'mastodon/features/explore/components/author_link';
-
-export const MoreFromAuthor = ({ accountId }) => (
-  <div className='more-from-author'>
-    <IconLogo />
-    <FormattedMessage id='link_preview.more_from_author' defaultMessage='More from {name}' values={{ name: <AuthorLink accountId={accountId} /> }} />
-  </div>
-);
-
-MoreFromAuthor.propTypes = {
-  accountId: PropTypes.string.isRequired,
-};

app/javascript/mastodon/components/more_from_author.tsx

@@ -0,0 +1,21 @@
+import { FormattedMessage } from 'react-intl';
+
+import { IconLogo } from 'mastodon/components/logo';
+import { AuthorLink } from 'mastodon/features/explore/components/author_link';
+
+export const MoreFromAuthor: React.FC<{ accountId: string }> = ({
+  accountId,
+}) => (
+  <FormattedMessage
+    id='link_preview.more_from_author'
+    defaultMessage='More from {name}'
+    values={{ name: <AuthorLink accountId={accountId} /> }}
+  >
+    {(chunks) => (
+      <div className='more-from-author'>
+        <IconLogo />
+        {chunks}
+      </div>
+    )}
+  </FormattedMessage>
+);