refactor: align expense preview card metadata line with mobile row styling

src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewHeader.tsx

@@ -67,6 +67,9 @@ function ReportPreviewHeader() {
         [translate, numberOfRequests],
     );
 
+    // A cancelled payment is a report level event and it isn't surfaced by the status badge, so we show it next to the expense count.
+    const supportingText = iouReport?.isCancelledIOU ? `${translate('iou.canceled')} ${CONST.DOT_SEPARATOR} ${expenseCount}` : expenseCount;
+
     const reportStateNum = iouReport?.stateNum ?? action?.childStateNum;
     const reportStatusNum = iouReport?.statusNum ?? action?.childStatusNum;
 
@@ -123,7 +126,7 @@ function ReportPreviewHeader() {
                                         tooltipText={reportStatusTooltip}
                                     />
                                 )}
-                                {!shouldShowAccessPlaceHolder && <Text style={[styles.textLabelSupporting, styles.lh16]}>{expenseCount}</Text>}
+                                {!shouldShowAccessPlaceHolder && <Text style={[styles.textLabelSupporting, styles.lh16]}>{supportingText}</Text>}
                             </View>
                         )
                     )}