From b9d3ce1ccc423f7847c827421fd6e4da526cbdd5 Mon Sep 17 00:00:00 2001
From: AmarTrebinjac <amartrebinjac@gmail.com>
Date: Wed, 15 Apr 2026 11:50:18 +0000
Subject: [PATCH 1/2] fix(notifications): truncate X post attachment titles in
 notification list

Apply CSS line-clamp-3 to notification attachment titles for
SourcePostAdded, UserPostAdded, and SquadPostAdded notification types.
This prevents X post content from stretching the /notifications page
vertically while preserving full text in the DOM for accessibility.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../notifications/NotificationItem.tsx        |  1 +
 .../NotificationItemAttachment.tsx            | 26 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/shared/src/components/notifications/NotificationItem.tsx b/packages/shared/src/components/notifications/NotificationItem.tsx
index 23d6af3c007..9fe40ab5e58 100644
--- a/packages/shared/src/components/notifications/NotificationItem.tsx
+++ b/packages/shared/src/components/notifications/NotificationItem.tsx
@@ -281,6 +281,7 @@ function NotificationItem(props: NotificationItemProps): ReactElement {
           <NotificationItemAttachment
             key={attachment}
             title={attachment}
+            notificationType={type}
             {...restAttachmentProps}
           />
         ))}
diff --git a/packages/shared/src/components/notifications/NotificationItemAttachment.tsx b/packages/shared/src/components/notifications/NotificationItemAttachment.tsx
index 6c69ec54885..f2a747cf8a2 100644
--- a/packages/shared/src/components/notifications/NotificationItemAttachment.tsx
+++ b/packages/shared/src/components/notifications/NotificationItemAttachment.tsx
@@ -1,15 +1,28 @@
 import type { ReactElement } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import type { NotificationAttachment } from '../../graphql/notifications';
 import { NotificationAttachmentType } from '../../graphql/notifications';
 import { IconSize } from '../Icon';
 import { CardCover } from '../cards/common/CardCover';
+import { NotificationType } from './utils';
+
+interface NotificationItemAttachmentProps extends NotificationAttachment {
+  notificationType?: NotificationType;
+}
+
+const truncatedNotificationTypes = new Set([
+  NotificationType.SourcePostAdded,
+  NotificationType.UserPostAdded,
+  NotificationType.SquadPostAdded,
+]);
 
 function NotificationItemAttachment({
   image,
   title,
   type,
-}: NotificationAttachment): ReactElement {
+  notificationType,
+}: NotificationItemAttachmentProps): ReactElement {
   return (
     <div className="mt-2 flex flex-row items-center rounded-16 border border-border-subtlest-tertiary p-4">
       <div>
@@ -25,7 +38,16 @@ function NotificationItemAttachment({
           videoProps={{ size: IconSize.XLarge }}
         />
       </div>
-      <span className="ml-4 flex-1 break-words typo-callout">{title}</span>
+      <span
+        className={classNames(
+          'ml-4 flex-1 break-words typo-callout',
+          notificationType &&
+            truncatedNotificationTypes.has(notificationType) &&
+            'multi-truncate line-clamp-3',
+        )}
+      >
+        {title}
+      </span>
     </div>
   );
 }

From 955cb2b59d99e5fce9e1ff989a6f565b3c1e02d4 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Wed, 15 Apr 2026 12:21:57 +0000
Subject: [PATCH 2/2] fix(notifications): resolve strict TypeScript errors in
 NotificationItem

Fix 8 strict-mode TS errors exposed by typecheck_strict_changed CI step
because the file was touched by this PR:

- Icon(): change return type to ReactElement | null
- label: return '' instead of null when notification is missing or copy
  is undefined (notificationMutingCopy is Partial, so lookup can return
  undefined)
- NotificationItem: change return type to ReactElement | null
- useObjectPurify call: use `description ?? ''` so the input object
  satisfies Record<string, string | Node> (no undefined values)

Co-authored-by: Amar Trebinjac <AmarTrebinjac@users.noreply.github.com>
---
 .../components/notifications/NotificationItem.tsx    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/components/notifications/NotificationItem.tsx b/packages/shared/src/components/notifications/NotificationItem.tsx
index 9fe40ab5e58..a0a7009c7c1 100644
--- a/packages/shared/src/components/notifications/NotificationItem.tsx
+++ b/packages/shared/src/components/notifications/NotificationItem.tsx
@@ -90,7 +90,7 @@ const NotificationOptionsButton = ({
     });
   };
 
-  const Icon = (): ReactElement => {
+  const Icon = (): ReactElement | null => {
     if (!notification) {
       return null;
     }
@@ -109,7 +109,7 @@ const NotificationOptionsButton = ({
 
   const label = useMemo((): string => {
     if (!notification) {
-      return null;
+      return '';
     }
 
     if (isFetching) {
@@ -120,6 +120,10 @@ const NotificationOptionsButton = ({
       preferences[0]?.status === NotificationPreferenceStatus.Muted;
     const copy = notificationMutingCopy[notification?.type];
 
+    if (!copy) {
+      return '';
+    }
+
     return isMuted ? copy.unmute : copy.mute;
   }, [notification, preferences, isFetching]);
   const options = [{ icon: <Icon />, label, action: onItemClick }];
@@ -145,7 +149,7 @@ const NotificationOptionsButton = ({
   );
 };
 
-function NotificationItem(props: NotificationItemProps): ReactElement {
+function NotificationItem(props: NotificationItemProps): ReactElement | null {
   const {
     icon,
     type,
@@ -165,7 +169,7 @@ function NotificationItem(props: NotificationItemProps): ReactElement {
     isReady,
     title: memoizedTitle,
     description: memoizedDescription,
-  } = useObjectPurify({ title, description });
+  } = useObjectPurify({ title, description: description ?? '' });
   const router = useRouter();
   const isClickable = !notificationTypeNotClickable[type];