From a811866e697b6800b96ce0e471b75491eb30e1c9 Mon Sep 17 00:00:00 2001 From: "Sahil (via MelvinBot)" Date: Sat, 30 May 2026 17:22:27 +0000 Subject: [PATCH 1/3] Make system/violation messages text-selectable on desktop web Co-authored-by: Sahil --- src/pages/inbox/report/ReportActionItemBasicMessage.tsx | 8 ++++++-- .../inbox/report/ReportActionItemMessageWithExplain.tsx | 5 ++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/pages/inbox/report/ReportActionItemBasicMessage.tsx b/src/pages/inbox/report/ReportActionItemBasicMessage.tsx index ab193cb88671..c44f43f90f45 100644 --- a/src/pages/inbox/report/ReportActionItemBasicMessage.tsx +++ b/src/pages/inbox/report/ReportActionItemBasicMessage.tsx @@ -2,7 +2,9 @@ import {Str} from 'expensify-common'; import React, {useMemo} from 'react'; import {View} from 'react-native'; import Text from '@components/Text'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import {containsCustomEmoji, containsOnlyCustomEmoji} from '@libs/EmojiUtils'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import TextWithEmojiFragment from './comment/TextWithEmojiFragment'; @@ -13,7 +15,9 @@ type ReportActionItemBasicMessageProps = Partial & { function ReportActionItemBasicMessage({message, children}: ReportActionItemBasicMessageProps) { const styles = useThemeStyles(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const messageContainsCustomEmojiWithText = useMemo(() => containsCustomEmoji(message) && !containsOnlyCustomEmoji(message), [message]); + const selectableStyle = !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone; return ( @@ -21,11 +25,11 @@ function ReportActionItemBasicMessage({message, children}: ReportActionItemBasic (messageContainsCustomEmojiWithText ? ( ) : ( - {Str.htmlDecode(message)} + {Str.htmlDecode(message)} ))} {children} diff --git a/src/pages/inbox/report/ReportActionItemMessageWithExplain.tsx b/src/pages/inbox/report/ReportActionItemMessageWithExplain.tsx index 99ad7411423b..ae6cbf7cc96c 100644 --- a/src/pages/inbox/report/ReportActionItemMessageWithExplain.tsx +++ b/src/pages/inbox/report/ReportActionItemMessageWithExplain.tsx @@ -8,8 +8,10 @@ import useDelegateAccountID from '@hooks/useDelegateAccountID'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import {openLink} from '@libs/actions/Link'; import {explain} from '@libs/actions/Report'; +import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import {hasReasoning} from '@libs/ReportActionsUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -38,6 +40,7 @@ function ReportActionItemMessageWithExplain({message, action, childReport, origi const {translate} = useLocalize(); const personalDetail = useCurrentUserPersonalDetails(); const {environmentURL} = useEnvironment(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector}); const [betas] = useOnyx(ONYXKEYS.BETAS); @@ -61,7 +64,7 @@ function ReportActionItemMessageWithExplain({message, action, childReport, origi ${computedMessage}`} - isSelectable={false} + isSelectable={!canUseTouchScreen() || !shouldUseNarrowLayout} onLinkPress={handleLinkPress} /> From 398798007a0f6e8381a6fa54ca2909e74e3d456e Mon Sep 17 00:00:00 2001 From: "Sahil (via MelvinBot)" Date: Wed, 3 Jun 2026 07:32:55 +0000 Subject: [PATCH 2/3] Make inline system error messages text-selectable on desktop web Apply the same selectable pattern used by the other system-message renderers to InlineSystemMessage, which renders action.error text. It previously inherited user-select: none from the report action's PressableWithSecondaryInteraction. Co-authored-by: Sahil --- src/components/InlineSystemMessage.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx index 98bbe7504ba1..c6efe3326205 100644 --- a/src/components/InlineSystemMessage.tsx +++ b/src/components/InlineSystemMessage.tsx @@ -1,8 +1,10 @@ import React from 'react'; import {View} from 'react-native'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import Icon from './Icon'; import Text from './Text'; @@ -14,7 +16,9 @@ type InlineSystemMessageProps = { function InlineSystemMessage({message = ''}: InlineSystemMessageProps) { const theme = useTheme(); const styles = useThemeStyles(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const icons = useMemoizedLazyExpensifyIcons(['Exclamation']); + const selectableStyle = !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone; if (!message) { return null; } @@ -25,7 +29,7 @@ function InlineSystemMessage({message = ''}: InlineSystemMessageProps) { src={icons.Exclamation} fill={theme.danger} /> - {message} + {message} ); } From ee290cde16c4c79e525d13984cd5f6a7d4edd69b Mon Sep 17 00:00:00 2001 From: "Sahil (via MelvinBot)" Date: Mon, 8 Jun 2026 23:27:29 +0000 Subject: [PATCH 3/3] Make task system messages text-selectable on desktop web Co-authored-by: Sahil --- src/components/ReportActionItem/TaskAction.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/TaskAction.tsx b/src/components/ReportActionItem/TaskAction.tsx index 4a10da88fb48..973c75d84104 100644 --- a/src/components/ReportActionItem/TaskAction.tsx +++ b/src/components/ReportActionItem/TaskAction.tsx @@ -4,7 +4,9 @@ import type {OnyxEntry} from 'react-native-onyx'; import RenderHTML from '@components/RenderHTML'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import {getTaskReportActionMessage} from '@libs/TaskUtils'; import type {ReportAction} from '@src/types/onyx'; @@ -16,14 +18,20 @@ type TaskActionProps = { function TaskAction({action}: TaskActionProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const message = getTaskReportActionMessage(translate, action); + const isSelectable = !canUseTouchScreen() || !shouldUseNarrowLayout; + const selectableStyle = isSelectable ? styles.userSelectText : styles.userSelectNone; return ( {message.html ? ( - ${message.html}`} /> + ${message.html}`} + isSelectable={isSelectable} + /> ) : ( - {message.text} + {message.text} )} );