From 56ed4e12accdcf0ab2d84765f459f97e59350a7f Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Thu, 30 May 2024 18:28:19 +0530
Subject: [PATCH] handle text overflow on native

---
 src/components/ReportActionItem/TripDetailsView.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TripDetailsView.tsx b/src/components/ReportActionItem/TripDetailsView.tsx
index 863531bc7e0a..23bfce42c469 100644
--- a/src/components/ReportActionItem/TripDetailsView.tsx
+++ b/src/components/ReportActionItem/TripDetailsView.tsx
@@ -6,6 +6,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
@@ -31,6 +32,7 @@ type ReservationViewProps = {
 function ReservationView({reservation}: ReservationViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const reservationIcon = TripReservationUtils.getTripReservationIcon(reservation.type);
 
@@ -79,14 +81,14 @@ function ReservationView({reservation}: ReservationViewProps) {
             return (
                 <View style={styles.gap1}>
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
-                        <Text style={[styles.textNormalBold, styles.lh20]}>{formatAirportInfo(reservation.start)}</Text>
+                        <Text style={[styles.textNormalBold, styles.lh20, shouldUseNarrowLayout && styles.flex1]}>{formatAirportInfo(reservation.start)}</Text>
                         <Icon
                             src={Expensicons.ArrowRightLong}
                             width={variables.iconSizeSmall}
                             height={variables.iconSizeSmall}
                             fill={theme.icon}
                         />
-                        <Text style={[styles.textNormalBold, styles.lh20]}>{formatAirportInfo(reservation.end)}</Text>
+                        <Text style={[styles.textNormalBold, styles.lh20, shouldUseNarrowLayout && styles.flex1]}>{formatAirportInfo(reservation.end)}</Text>
                     </View>
                     {bottomDescription && <Text style={[styles.textSupportingSmallSize, styles.lh14]}>{bottomDescription}</Text>}
                 </View>