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}
);
}
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}
)}
);
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}
/>