From fccc4059233e5918b2ba5c5898435c7061931804 Mon Sep 17 00:00:00 2001
From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com>
Date: Tue, 13 May 2025 16:14:29 +0530
Subject: [PATCH 1/7] update style of preview

---
 .../ReportActionItem/TripRoomPreview.tsx      | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx
index 616bbfd8bd9e..679b794f5e9e 100644
--- a/src/components/ReportActionItem/TripRoomPreview.tsx
+++ b/src/components/ReportActionItem/TripRoomPreview.tsx
@@ -83,15 +83,33 @@ function ReservationView({reservation, onPress}: ReservationViewProps) {
         const endName = reservation.type === CONST.RESERVATION_TYPE.FLIGHT ? reservation.end.shortName : reservation.end.longName;
 
         titleComponent = (
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
-                <Text style={[styles.labelStrong, styles.flexShrink1]}>{startName}</Text>
-                <Icon
-                    src={Expensicons.ArrowRightLong}
-                    width={variables.iconSizeSmall}
-                    height={variables.iconSizeSmall}
-                    fill={theme.icon}
-                />
-                <Text style={[styles.labelStrong, styles.flexShrink1]}>{endName}</Text>
+            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                <View style={[styles.flex1, styles.flexRow]}>
+                    <Text
+                        style={[styles.labelStrong]}
+                        numberOfLines={2}
+                    >
+                        {startName}
+                    </Text>
+                </View>
+
+                <View style={styles.travelArrowCenter}>
+                    <Icon
+                        src={Expensicons.ArrowRightLong}
+                        width={variables.iconSizeSmall}
+                        height={variables.iconSizeSmall}
+                        fill={theme.icon}
+                    />
+                </View>
+
+                <View style={[styles.flex1, styles.flexRow, styles.justifyContentEnd]}>
+                    <Text
+                        style={[styles.labelStrong, styles.textAlignRight]}
+                        numberOfLines={2}
+                    >
+                        {endName}
+                    </Text>
+                </View>
             </View>
         );
     }

From 87784d4acbccfa52352989f2b8b07833d768b223 Mon Sep 17 00:00:00 2001
From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com>
Date: Tue, 13 May 2025 16:15:33 +0530
Subject: [PATCH 2/7] include new style for travel preview

---
 src/styles/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index ec484c200df4..fd9cab8b5fa8 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1623,6 +1623,12 @@ const styles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
+        travelArrowCenter: {
+            width: variables.iconSizeSmall + 8,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+
         signInPageGradient: {
             height: '100%',
             width: 540,

From 2c72d8d08407f85798ae84206394f90a46619b4f Mon Sep 17 00:00:00 2001
From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com>
Date: Wed, 14 May 2025 11:00:43 +0530
Subject: [PATCH 3/7] use tripReservationRow

---
 src/styles/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index fd9cab8b5fa8..4cfb9ca6f291 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5567,6 +5567,13 @@ const styles = (theme: ThemeColors) =>
             justifyContent: 'center',
         },
 
+        tripReservationRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            maxWidth: '50%',
+            flexShrink: 1,
+        },
+
         textLineThrough: {
             textDecorationLine: 'line-through',
         },

From 9304d8998603c21c1d6ef2955896e96bb406246a Mon Sep 17 00:00:00 2001
From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com>
Date: Wed, 14 May 2025 11:01:08 +0530
Subject: [PATCH 4/7] update style to increase startName and arrow width to 50%

---
 .../ReportActionItem/TripRoomPreview.tsx          | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx
index 679b794f5e9e..be55f61ddee0 100644
--- a/src/components/ReportActionItem/TripRoomPreview.tsx
+++ b/src/components/ReportActionItem/TripRoomPreview.tsx
@@ -84,16 +84,15 @@ function ReservationView({reservation, onPress}: ReservationViewProps) {
 
         titleComponent = (
             <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                <View style={[styles.flex1, styles.flexRow]}>
+                {/* StartName + Arrow with max 50% width */}
+                <View style={styles.tripReservationRow}>
                     <Text
-                        style={[styles.labelStrong]}
                         numberOfLines={2}
+                        style={[styles.labelStrong, styles.mr2]} // gap between startName and arrow
+                        ellipsizeMode="tail"
                     >
                         {startName}
                     </Text>
-                </View>
-
-                <View style={styles.travelArrowCenter}>
                     <Icon
                         src={Expensicons.ArrowRightLong}
                         width={variables.iconSizeSmall}
@@ -102,10 +101,12 @@ function ReservationView({reservation, onPress}: ReservationViewProps) {
                     />
                 </View>
 
-                <View style={[styles.flex1, styles.flexRow, styles.justifyContentEnd]}>
+                {/* EndName with marginLeft instead of spacer */}
+                <View style={[styles.flex1, styles.ml2]}>
                     <Text
-                        style={[styles.labelStrong, styles.textAlignRight]}
                         numberOfLines={2}
+                        style={[styles.labelStrong]}
+                        ellipsizeMode="tail"
                     >
                         {endName}
                     </Text>

From 2d6458a957419e8fa09c7d80d4bfcd81885422b3 Mon Sep 17 00:00:00 2001
From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com>
Date: Thu, 15 May 2025 22:17:54 +0530
Subject: [PATCH 5/7] Update src/styles/index.ts

---
 src/styles/index.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 4cfb9ca6f291..d5fa3657c5bf 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1623,12 +1623,6 @@ const styles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
-        travelArrowCenter: {
-            width: variables.iconSizeSmall + 8,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-
         signInPageGradient: {
             height: '100%',
             width: 540,

From 846ebcbb90c6ef2ae0d98bfc72c5d5fa42c70989 Mon Sep 17 00:00:00 2001
From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com>
Date: Tue, 10 Jun 2025 10:03:38 +0000
Subject: [PATCH 6/7] Fix mobile view for trip preview

---
 .../ReportActionItem/TripRoomPreview.tsx      | 35 ++++++++++---------
 src/styles/index.ts                           | 11 ++++++
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx
index be55f61ddee0..021de2a89a39 100644
--- a/src/components/ReportActionItem/TripRoomPreview.tsx
+++ b/src/components/ReportActionItem/TripRoomPreview.tsx
@@ -83,25 +83,26 @@ function ReservationView({reservation, onPress}: ReservationViewProps) {
         const endName = reservation.type === CONST.RESERVATION_TYPE.FLIGHT ? reservation.end.shortName : reservation.end.longName;
 
         titleComponent = (
-            <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                {/* StartName + Arrow with max 50% width */}
+            <View style={[styles.flexRow, styles.alignItemsStart]}>
                 <View style={styles.tripReservationRow}>
-                    <Text
-                        numberOfLines={2}
-                        style={[styles.labelStrong, styles.mr2]} // gap between startName and arrow
-                        ellipsizeMode="tail"
-                    >
-                        {startName}
-                    </Text>
-                    <Icon
-                        src={Expensicons.ArrowRightLong}
-                        width={variables.iconSizeSmall}
-                        height={variables.iconSizeSmall}
-                        fill={theme.icon}
-                    />
+                    <View style={styles.flexShrink}>
+                        <Text
+                            numberOfLines={2}
+                            style={[styles.labelStrong, styles.mr2]}
+                            ellipsizeMode="tail"
+                        >
+                            {startName}
+                        </Text>
+                    </View>
+                    <View style={styles.iconWrapper}>
+                        <Icon
+                            src={Expensicons.ArrowRightLong}
+                            width={variables.iconSizeSmall}
+                            height={variables.iconSizeSmall}
+                            fill={theme.icon}
+                        />
+                    </View>
                 </View>
-
-                {/* EndName with marginLeft instead of spacer */}
                 <View style={[styles.flex1, styles.ml2]}>
                     <Text
                         numberOfLines={2}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 146e1aad7543..06f4fd3da902 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5631,6 +5631,17 @@ const styles = (theme: ThemeColors) =>
             flexShrink: 1,
         },
 
+        flexShrink: {
+            flexShrink: 1,
+        },
+
+        iconWrapper: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            alignSelf: 'flex-start', // Keeps icon from dropping below
+            paddingTop: 2, // Adjust slightly for vertical centering
+        },
+
         textLineThrough: {
             textDecorationLine: 'line-through',
         },

From d02325ef8745a209c18eec5ef83fd460dd5f6a12 Mon Sep 17 00:00:00 2001
From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com>
Date: Tue, 10 Jun 2025 10:09:17 +0000
Subject: [PATCH 7/7] remove extra styles

---
 src/components/ReportActionItem/TripRoomPreview.tsx | 2 +-
 src/styles/index.ts                                 | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/TripRoomPreview.tsx b/src/components/ReportActionItem/TripRoomPreview.tsx
index 021de2a89a39..72707462dc6d 100644
--- a/src/components/ReportActionItem/TripRoomPreview.tsx
+++ b/src/components/ReportActionItem/TripRoomPreview.tsx
@@ -85,7 +85,7 @@ function ReservationView({reservation, onPress}: ReservationViewProps) {
         titleComponent = (
             <View style={[styles.flexRow, styles.alignItemsStart]}>
                 <View style={styles.tripReservationRow}>
-                    <View style={styles.flexShrink}>
+                    <View style={styles.flexShrink1}>
                         <Text
                             numberOfLines={2}
                             style={[styles.labelStrong, styles.mr2]}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 06f4fd3da902..9dd6a3f07e30 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5631,10 +5631,6 @@ const styles = (theme: ThemeColors) =>
             flexShrink: 1,
         },
 
-        flexShrink: {
-            flexShrink: 1,
-        },
-
         iconWrapper: {
             justifyContent: 'center',
             alignItems: 'center',