From 7d1fae36a95ba38b83b598522b73b11328f0984b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sun, 19 Oct 2025 21:13:05 +0200
Subject: [PATCH] pl-fe: Add 'title' to notification info
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/statuses/status-info.tsx   |  8 +++---
 .../notifications/components/notification.tsx | 25 +++++--------------
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/packages/pl-fe/src/components/statuses/status-info.tsx b/packages/pl-fe/src/components/statuses/status-info.tsx
index 865ba3619..3594722d5 100644
--- a/packages/pl-fe/src/components/statuses/status-info.tsx
+++ b/packages/pl-fe/src/components/statuses/status-info.tsx
@@ -7,10 +7,11 @@ interface IStatusInfo {
   avatarSize: number;
   icon: React.ReactNode;
   text: React.ReactNode;
+  title?: string;
 }
 
 const StatusInfo = (props: IStatusInfo) => {
-  const { avatarSize, icon, text } = props;
+  const { avatarSize, icon, text, title } = props;
 
   const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     event.stopPropagation();
@@ -20,9 +21,10 @@ const StatusInfo = (props: IStatusInfo) => {
     <HStack
       space={2}
       alignItems='center'
-      className='-mb-1 w-fit cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse'
+      className='-mb-1 w-fit max-w-full cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse'
       onClick={onClick}
-      style={{ marginLeft: avatarSize + -25 }}
+      style={{ marginLeft: avatarSize - 25, maxWidth: `calc(100% - ${avatarSize - 25}px)` }}
+      title={title}
     >
       {icon}
 
diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index d08a54c5c..0ce923484 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -27,6 +27,7 @@ import { NotificationType } from 'pl-fe/utils/notification';
 import type { NotificationGroup } from 'pl-api';
 import type { Account } from 'pl-fe/normalizers/account';
 import type { Status as StatusEntity } from 'pl-fe/normalizers/status';
+import StatusInfo from 'pl-fe/components/statuses/status-info';
 
 const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: string) => {
   const output = [message];
@@ -427,7 +428,7 @@ const Notification: React.FC<INotification> = (props) => {
 
   const targetName = notification.type === 'move' ? notification.target.acct : '';
 
-  const message: React.ReactNode = account && typeof account === 'object'
+  const message: React.ReactNode = accounts.length
     ? buildMessage(intl, displayedType, accounts, targetName, instance.title, !!status)
     : null;
 
@@ -435,7 +436,7 @@ const Notification: React.FC<INotification> = (props) => {
     notificationForScreenReader(
       intl,
       intl.formatMessage(messages[displayedType], {
-        name: account && typeof account === 'object' ? account.acct : '',
+        name: accounts.length ? intl.formatList(accounts.map(account => account.acct), { type: 'conjunction' }) : '',
         targetName,
       }),
       notification.latest_page_notification_at!,
@@ -453,26 +454,12 @@ const Notification: React.FC<INotification> = (props) => {
         <div className='p-4'>
           <div className='mb-2'>
             <HStack alignItems='center' space={3}>
-              <div
-                className='flex justify-end'
-                style={{ flexBasis: avatarSize }}
-              >
-                {renderIcon()}
-              </div>
-
-              <div className='truncate'>
-                <Text
-                  theme='muted'
-                  size='xs'
-                  truncate
-                  data-testid='message'
-                >
-                  {message}
-                </Text>
+              <div className='min-w-0 flex-1'>
+                <StatusInfo avatarSize={avatarSize} icon={renderIcon()} text={message} title={ariaLabel} />
               </div>
 
               {!['mention', 'status'].includes(notification.type) && (
-                <div className='ml-auto'>
+                <div className='ml-auto flex-none'>
                   <Text
                     theme='muted'
                     size='xs'