Merge pull request Expensify#72704 from lorretheboy/fix/72636

Expense - Report subtitle "From #report in workspace" is aligned to the left

Author: lakchote

src/components/AvatarWithDisplayName.tsx

@@ -273,7 +273,7 @@ function AvatarWithDisplayName({
                         )}
                     </View>
 
-                    <View style={[styles.flex1, styles.flexColumn]}>
+                    <View style={[styles.flex1, styles.flexColumn, styles.mnw0]}>
                         {getCustomDisplayName(
                             shouldUseCustomSearchTitleName,
                             report,

src/components/ParentNavigationSubtitle.tsx

@@ -125,11 +125,12 @@ function ParentNavigationSubtitle({
     };
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.flexShrink1, styles.mnw0]}>
             {!!statusText && (
                 <View
                     style={[
                         styles.reportStatusContainer,
+                        styles.flexShrink0,
                         styles.mr1,
                         {
                             backgroundColor: statusTextBackgroundColor,
@@ -141,7 +142,7 @@ function ParentNavigationSubtitle({
                 </View>
             )}
             <Text
-                style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flex1, textStyles]}
+                style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flexShrink1, styles.mnw0, textStyles]}
                 numberOfLines={1}
             >
                 {!!reportName && (

src/pages/ReportDetailsPage.tsx

@@ -704,12 +704,14 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail
                 </>
             )}
             {!isEmptyObject(parentNavigationSubtitleData) && (isMoneyRequestReport || isInvoiceReport || isMoneyRequest || isTaskReport) && (
-                <ParentNavigationSubtitle
-                    parentNavigationSubtitleData={parentNavigationSubtitleData}
-                    parentReportID={report?.parentReportID}
-                    parentReportActionID={report?.parentReportActionID}
-                    pressableStyles={[styles.mt1, styles.mw100]}
-                />
+                <View style={[styles.w100, styles.mt1]}>
+                    <ParentNavigationSubtitle
+                        parentNavigationSubtitleData={parentNavigationSubtitleData}
+                        parentReportID={report?.parentReportID}
+                        parentReportActionID={report?.parentReportActionID}
+                        pressableStyles={[styles.mw100]}
+                    />
+                </View>
             )}
         </View>
     );
@@ -751,12 +753,14 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail
     const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled && isAdminOwnerApproverOrReportOwner(report, policy);
 
     const nameSectionFurtherDetailsContent = (
-        <ParentNavigationSubtitle
-            parentNavigationSubtitleData={parentNavigationSubtitleData}
-            parentReportID={report?.parentReportID}
-            parentReportActionID={report?.parentReportActionID}
-            pressableStyles={[styles.mt1, styles.mw100]}
-        />
+        <View style={[styles.w100, styles.mt1]}>
+            <ParentNavigationSubtitle
+                parentNavigationSubtitleData={parentNavigationSubtitleData}
+                parentReportID={report?.parentReportID}
+                parentReportActionID={report?.parentReportActionID}
+                pressableStyles={[styles.mw100]}
+            />
+        </View>
     );
 
     const nameSectionTitleField = !!titleField && (