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>
+);

app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx

@@ -18,12 +18,14 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 import { DisplayedName } from './displayed_name';
 import { EmbeddedStatus } from './embedded_status';
 
+const AVATAR_SIZE = 28;
+
 export const AvatarById: React.FC<{ accountId: string }> = ({ accountId }) => {
   const account = useAppSelector((state) => state.accounts.get(accountId));
 
   if (!account) return null;
 
-  return <Avatar withLink account={account} size={28} />;
+  return <Avatar withLink account={account} size={AVATAR_SIZE} />;
 };
 
 export type LabelRenderer = (
@@ -108,7 +110,7 @@ export const NotificationGroupWithStatus: React.FC<{
         <div className='notification-group__main'>
           <div className='notification-group__main__header'>
             <div className='notification-group__main__header__wrapper'>
-              <AvatarGroup>
+              <AvatarGroup avatarHeight={AVATAR_SIZE}>
                 {accountIds
                   .slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS)
                   .map((id) => (
@@ -123,7 +125,14 @@ export const NotificationGroupWithStatus: React.FC<{
 
             <div className='notification-group__main__header__label'>
               {label}
-              {timestamp && <RelativeTimestamp timestamp={timestamp} />}
+              {timestamp && (
+                <>
+                  <span className='notification-group__main__header__label-separator'>
+                    &middot;
+                  </span>
+                  <RelativeTimestamp timestamp={timestamp} />
+                </>
+              )}
             </div>
           </div>
 

app/javascript/styles/mastodon/components.scss

@@ -2253,14 +2253,18 @@ a .account__avatar {
 
 .avatar-group {
   display: flex;
-  gap: 8px;
+
-  flex-wrap: wrap;
+  --avatar-height: 28px;
+
+  &:not(.avatar-group--compact) {
+    gap: 8px;
+    flex-wrap: wrap;
+    height: var(--avatar-height);
+    overflow-y: clip;
+  }
 }
 
 .avatar-group--compact {
-  gap: 0;
-  flex-wrap: nowrap;
-
   & > :not(:first-child) {
     margin-inline-start: -12px;
   }
@@ -10412,7 +10416,8 @@ noscript {
   padding: 15px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 4px 8px;
 
   .logo {
     width: 16px;
@@ -10506,12 +10511,6 @@ noscript {
     overflow: hidden;
     container-type: inline-size;
 
-    @container (width < 350px) {
-      &__header time {
-        display: none;
-      }
-    }
-
     &__header {
       display: flex;
       flex-direction: column;
@@ -10524,7 +10523,8 @@ noscript {
 
       &__label {
         display: flex;
-        gap: 8px;
+        flex-wrap: wrap;
+        gap: 2px 8px;
         font-size: 15px;
         line-height: 22px;
         color: $darker-text-color;
@@ -10542,6 +10542,13 @@ noscript {
         time {
           color: $dark-text-color;
         }
+
+        @container (width < 350px) {
+          time,
+          &-separator {
+            display: none;
+          }
+        }
       }
     }