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