From 9b56e0f723f0b2bc3135dcf22f846af1032241b9 Mon Sep 17 00:00:00 2001 From: Alex Benzer Date: Sun, 31 May 2026 00:04:08 -0700 Subject: [PATCH] Fix notification timestamp tooltip clipping and refine hover highlight --- .../notifications/NotificationFeedItem.tsx | 33 +++++++++++++++++-- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/src/view/com/notifications/NotificationFeedItem.tsx b/src/view/com/notifications/NotificationFeedItem.tsx index 950dfb3199..5001148da2 100644 --- a/src/view/com/notifications/NotificationFeedItem.tsx +++ b/src/view/com/notifications/NotificationFeedItem.tsx @@ -97,7 +97,12 @@ let NotificationFeedItem = ({ const queryClient = useQueryClient() const t = useTheme() const {_, i18n} = useLingui() + const ax = useAnalytics() + const profileCardEnabled = ax.features.enabled( + ax.features.NotificationsExpandedProfileCardEnable, + ) const [isAuthorsExpanded, setIsAuthorsExpanded] = useState(false) + const [isHoveringAuthorsList, setIsHoveringAuthorsList] = useState(false) const itemHref = useMemo(() => { switch (item.type) { case 'post-like': @@ -583,7 +588,11 @@ let NotificationFeedItem = ({ borderColor: t.palette.primary_100, }, !hideTopBorder && a.border_t, - a.overflow_hidden, + // Clip horizontal overflow (in case of long handles) but let the timestamp overflow the bottom of the cell. + platform({ + web: {overflowX: 'clip', overflowY: 'visible'}, + native: {overflow: 'hidden'}, + }), ]} to={itemHref} accessible={!isAuthorsExpanded} @@ -618,7 +627,9 @@ let NotificationFeedItem = ({ }}> {({hovered}) => ( <> - + {/* TODO: Prevent conditional rendering and move toward composable notifications for clearer accessibility labeling */} @@ -627,7 +638,17 @@ let NotificationFeedItem = ({ + onToggleAuthorsExpanded={onToggleAuthorsExpanded} + onHoverIn={ + profileCardEnabled + ? () => setIsHoveringAuthorsList(true) + : undefined + } + onHoverOut={ + profileCardEnabled + ? () => setIsHoveringAuthorsList(false) + : undefined + }> void + onHoverIn?: () => void + onHoverOut?: () => void }) { if (hasMultipleAuthors) { return ( {children}