From 1993ffdb80592b4aecdcab3b9fdc07e5fffae883 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 3 Oct 2024 15:07:37 +0700
Subject: [PATCH 01/12] fix: resolve dupe button on one-expense report

---
 src/components/MoneyReportHeader.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index fdf6f8edd825..e76cad4fb3bf 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -89,6 +89,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const {reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(moneyRequestReport);
     const isOnHold = TransactionUtils.isOnHold(transaction);
     const isDeletedParentAction = !!requestParentReportAction && ReportActionsUtils.isDeletedAction(requestParentReportAction);
+    const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? '');
 
     // Only the requestor can delete the request, admins can only edit it.
     const isActionOwner =
@@ -294,6 +295,15 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 // Shows border if no buttons or banners are showing below the header
                 shouldShowBorderBottom={!isMoreContentShown}
             >
+                {isDuplicate && !shouldUseNarrowLayout && (
+                    <Button
+                        text={translate('iou.reviewDuplicates')}
+                        style={[styles.p0, styles.mh2]}
+                        onPress={() => {
+                            Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
+                        }}
+                    />
+                )}
                 {shouldShowSettlementButton && !shouldUseNarrowLayout && (
                     <View style={styles.pv2}>
                         <SettlementButton
@@ -349,6 +359,15 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
             </HeaderWithBackButton>
             {isMoreContentShown && (
                 <View style={[styles.dFlex, styles.flexColumn, styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
+                    {isDuplicate && shouldUseNarrowLayout && (
+                        <Button
+                            text={translate('iou.reviewDuplicates')}
+                            style={[styles.w100, styles.pr0]}
+                            onPress={() => {
+                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
+                            }}
+                        />
+                    )}
                     {shouldShowSettlementButton && shouldUseNarrowLayout && (
                         <SettlementButton
                             onlyShowPayElsewhere={onlyShowPayElsewhere}

From 140b0fee7bf976e3bff5974548e6e5ad61d49606 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 3 Oct 2024 15:36:11 +0700
Subject: [PATCH 02/12] fix: ui on narrow layout

---
 src/components/MoneyReportHeader.tsx      | 59 ++++++++++++-----------
 src/components/SettlementButton/index.tsx |  2 +
 src/components/SettlementButton/types.ts  |  3 ++
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index e76cad4fb3bf..5d8e6c28570c 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -359,34 +359,37 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
             </HeaderWithBackButton>
             {isMoreContentShown && (
                 <View style={[styles.dFlex, styles.flexColumn, styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
-                    {isDuplicate && shouldUseNarrowLayout && (
-                        <Button
-                            text={translate('iou.reviewDuplicates')}
-                            style={[styles.w100, styles.pr0]}
-                            onPress={() => {
-                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
-                            }}
-                        />
-                    )}
-                    {shouldShowSettlementButton && shouldUseNarrowLayout && (
-                        <SettlementButton
-                            onlyShowPayElsewhere={onlyShowPayElsewhere}
-                            currency={moneyRequestReport?.currency}
-                            confirmApproval={confirmApproval}
-                            policyID={moneyRequestReport?.policyID}
-                            chatReportID={moneyRequestReport?.chatReportID}
-                            iouReport={moneyRequestReport}
-                            onPress={confirmPayment}
-                            enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-                            addBankAccountRoute={bankAccountRoute}
-                            shouldHidePaymentOptions={!shouldShowPayButton}
-                            shouldShowApproveButton={shouldShowApproveButton}
-                            formattedAmount={!hasOnlyHeldExpenses ? displayedAmount : ''}
-                            shouldDisableApproveButton={shouldDisableApproveButton}
-                            isDisabled={isOffline && !canAllowSettlement}
-                            isLoading={!isOffline && !canAllowSettlement}
-                        />
-                    )}
+                    <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
+                        {isDuplicate && shouldUseNarrowLayout && (
+                            <Button
+                                text={translate('iou.reviewDuplicates')}
+                                style={[styles.flex1, styles.pr0]}
+                                onPress={() => {
+                                    Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
+                                }}
+                            />
+                        )}
+                        {shouldShowSettlementButton && shouldUseNarrowLayout && (
+                            <SettlementButton
+                                wrapperStyle={[styles.flex1]}
+                                onlyShowPayElsewhere={onlyShowPayElsewhere}
+                                currency={moneyRequestReport?.currency}
+                                confirmApproval={confirmApproval}
+                                policyID={moneyRequestReport?.policyID}
+                                chatReportID={moneyRequestReport?.chatReportID}
+                                iouReport={moneyRequestReport}
+                                onPress={confirmPayment}
+                                enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                                addBankAccountRoute={bankAccountRoute}
+                                shouldHidePaymentOptions={!shouldShowPayButton}
+                                shouldShowApproveButton={shouldShowApproveButton}
+                                formattedAmount={!hasOnlyHeldExpenses ? displayedAmount : ''}
+                                shouldDisableApproveButton={shouldDisableApproveButton}
+                                isDisabled={isOffline && !canAllowSettlement}
+                                isLoading={!isOffline && !canAllowSettlement}
+                            />
+                        )}
+                    </View>
                     {shouldShowExportIntegrationButton && shouldUseNarrowLayout && (
                         <ExportWithDropdownMenu
                             policy={policy}
diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx
index 8d3add9b6fd0..954a48839faf 100644
--- a/src/components/SettlementButton/index.tsx
+++ b/src/components/SettlementButton/index.tsx
@@ -59,6 +59,7 @@ function SettlementButton({
     onPaymentOptionsShow,
     onPaymentOptionsHide,
     onlyShowPayElsewhere,
+    wrapperStyle,
 }: SettlementButtonProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -245,6 +246,7 @@ function SettlementButton({
                         savePreferredPaymentMethod(policyID, option.value);
                     }}
                     style={style}
+                    wrapperStyle={wrapperStyle}
                     disabledStyle={disabledStyle}
                     buttonSize={buttonSize}
                     anchorAlignment={paymentMethodDropdownAnchorAlignment}
diff --git a/src/components/SettlementButton/types.ts b/src/components/SettlementButton/types.ts
index b3ad0c1c9bd0..df8fdedc512e 100644
--- a/src/components/SettlementButton/types.ts
+++ b/src/components/SettlementButton/types.ts
@@ -49,6 +49,9 @@ type SettlementButtonProps = {
     /** Additional styles to add to the component */
     style?: StyleProp<ViewStyle>;
 
+    /** Additional styles to add to the component wrapper */
+    wrapperStyle?: StyleProp<ViewStyle>;
+
     /** Additional styles to add to the component when it's disabled */
     disabledStyle?: StyleProp<ViewStyle>;
 

From d644b3943eb5fd9b8560d16ef1e1e1dfff5e7b26 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 3 Oct 2024 17:28:41 +0700
Subject: [PATCH 03/12] fix: styles

---
 src/components/MoneyReportHeader.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 5d8e6c28570c..7aff1ec0209f 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -296,13 +296,15 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 shouldShowBorderBottom={!isMoreContentShown}
             >
                 {isDuplicate && !shouldUseNarrowLayout && (
-                    <Button
-                        text={translate('iou.reviewDuplicates')}
-                        style={[styles.p0, styles.mh2]}
-                        onPress={() => {
-                            Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
-                        }}
-                    />
+                    <View style={[styles.mh2]}>
+                        <Button
+                            text={translate('iou.reviewDuplicates')}
+                            style={styles.p0}
+                            onPress={() => {
+                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
+                            }}
+                        />
+                    </View>
                 )}
                 {shouldShowSettlementButton && !shouldUseNarrowLayout && (
                     <View style={styles.pv2}>

From 30122b7867cedfb4670ce75ddeacfa162bfe1343 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 9 Oct 2024 10:38:54 +0700
Subject: [PATCH 04/12] fix: update ui

---
 src/components/MoneyReportHeader.tsx | 55 ++++++++++++++++------------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 7aff1ec0209f..30431975b672 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -248,6 +248,11 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled],
     );
 
+    const shouldDuplicateButtonBeSuccess = useMemo(
+        () => isDuplicate && !(shouldShowSettlementButton || shouldShowExportIntegrationButton || shouldShowSubmitButton || hasAllPendingRTERViolations),
+        [isDuplicate, shouldShowSettlementButton, shouldShowExportIntegrationButton, shouldShowSubmitButton, hasAllPendingRTERViolations],
+    );
+
     useEffect(() => {
         if (isLoadingHoldUseExplained) {
             return;
@@ -298,6 +303,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 {isDuplicate && !shouldUseNarrowLayout && (
                     <View style={[styles.mh2]}>
                         <Button
+                            success={shouldDuplicateButtonBeSuccess}
                             text={translate('iou.reviewDuplicates')}
                             style={styles.p0}
                             onPress={() => {
@@ -364,6 +370,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                     <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
                         {isDuplicate && shouldUseNarrowLayout && (
                             <Button
+                                success={shouldDuplicateButtonBeSuccess}
                                 text={translate('iou.reviewDuplicates')}
                                 style={[styles.flex1, styles.pr0]}
                                 onPress={() => {
@@ -391,31 +398,31 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                                 isLoading={!isOffline && !canAllowSettlement}
                             />
                         )}
+                        {shouldShowExportIntegrationButton && shouldUseNarrowLayout && (
+                            <ExportWithDropdownMenu
+                                policy={policy}
+                                report={moneyRequestReport}
+                                connectionName={connectedIntegration}
+                            />
+                        )}
+                        {shouldShowSubmitButton && shouldUseNarrowLayout && (
+                            <Button
+                                success={isWaitingForSubmissionFromCurrentUser}
+                                text={translate('common.submit')}
+                                style={[styles.flex1, styles.pr0]}
+                                onPress={() => IOU.submitReport(moneyRequestReport)}
+                                isDisabled={shouldDisableSubmitButton}
+                            />
+                        )}
+                        {hasAllPendingRTERViolations && shouldUseNarrowLayout && (
+                            <Button
+                                success
+                                text={translate('iou.markAsCash')}
+                                style={[styles.flex1, styles.pr0]}
+                                onPress={markAsCash}
+                            />
+                        )}
                     </View>
-                    {shouldShowExportIntegrationButton && shouldUseNarrowLayout && (
-                        <ExportWithDropdownMenu
-                            policy={policy}
-                            report={moneyRequestReport}
-                            connectionName={connectedIntegration}
-                        />
-                    )}
-                    {shouldShowSubmitButton && shouldUseNarrowLayout && (
-                        <Button
-                            success={isWaitingForSubmissionFromCurrentUser}
-                            text={translate('common.submit')}
-                            style={[styles.w100, styles.pr0]}
-                            onPress={() => IOU.submitReport(moneyRequestReport)}
-                            isDisabled={shouldDisableSubmitButton}
-                        />
-                    )}
-                    {hasAllPendingRTERViolations && shouldUseNarrowLayout && (
-                        <Button
-                            success
-                            text={translate('iou.markAsCash')}
-                            style={[styles.w100, styles.pr0]}
-                            onPress={markAsCash}
-                        />
-                    )}
                     {shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={nextStep} />}
                     {statusBarProps && (
                         <MoneyRequestHeaderStatusBar

From c230fa56e262809c32c551380181208dfc6e9231 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 9 Oct 2024 11:43:02 +0700
Subject: [PATCH 05/12] fix: lint

---
 src/components/MoneyReportHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 30431975b672..595097fa6071 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -249,7 +249,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     );
 
     const shouldDuplicateButtonBeSuccess = useMemo(
-        () => isDuplicate && !(shouldShowSettlementButton || shouldShowExportIntegrationButton || shouldShowSubmitButton || hasAllPendingRTERViolations),
+        () => isDuplicate && !shouldShowSettlementButton && !shouldShowExportIntegrationButton && !shouldShowSubmitButton && !hasAllPendingRTERViolations,
         [isDuplicate, shouldShowSettlementButton, shouldShowExportIntegrationButton, shouldShowSubmitButton, hasAllPendingRTERViolations],
     );
 

From b4ff475b8f4a22b8630d67bc9030a03e82fb524a Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Sun, 13 Oct 2024 21:46:41 +0700
Subject: [PATCH 06/12] fix: ui

---
 src/components/MoneyReportHeader.tsx                       | 2 +-
 src/components/ReportActionItem/ExportWithDropdownMenu.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 595097fa6071..e95ab550c29f 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -301,7 +301,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 shouldShowBorderBottom={!isMoreContentShown}
             >
                 {isDuplicate && !shouldUseNarrowLayout && (
-                    <View style={[styles.mh2]}>
+                    <View style={[shouldDuplicateButtonBeSuccess ? styles.ml2 : styles.mh2]}>
                         <Button
                             success={shouldDuplicateButtonBeSuccess}
                             text={translate('iou.reviewDuplicates')}
diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
index 2f01bb0f9f46..2f96b9d7dfaf 100644
--- a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
+++ b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
@@ -120,6 +120,7 @@ function ExportWithDropdownMenu({
                 onOptionSelected={({value}) => savePreferredExportMethod(value)}
                 options={dropdownOptions}
                 style={[shouldUseNarrowLayout && styles.flexGrow1]}
+                wrapperStyle={styles.flex1}
                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
             />
             <ConfirmModal

From 5119fd6b00abe6fd0e6eff4479c448caa511899a Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 16 Oct 2024 21:26:48 +0700
Subject: [PATCH 07/12] fix: remove gap on large screens

---
 src/components/MoneyReportHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index e95ab550c29f..248c0843353b 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -366,7 +366,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 )}
             </HeaderWithBackButton>
             {isMoreContentShown && (
-                <View style={[styles.dFlex, styles.flexColumn, styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
+                <View style={[styles.dFlex, styles.flexColumn, shouldUseNarrowLayout && styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
                     <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
                         {isDuplicate && shouldUseNarrowLayout && (
                             <Button

From d5a7b0f423f87c88a7f7df2f770c53a01ff09a80 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 16 Oct 2024 23:36:15 +0700
Subject: [PATCH 08/12] fix: ui

---
 src/components/MoneyReportHeader.tsx                  | 11 ++++++-----
 .../ReportActionItem/ExportWithDropdownMenu.tsx       |  6 +++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 248c0843353b..5b8b7efdebff 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -366,13 +366,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 )}
             </HeaderWithBackButton>
             {isMoreContentShown && (
-                <View style={[styles.dFlex, styles.flexColumn, shouldUseNarrowLayout && styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
+                <View style={[styles.dFlex, styles.flexColumn, styles.pb3, styles.ph5, styles.borderBottom]}>
                     <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
                         {isDuplicate && shouldUseNarrowLayout && (
                             <Button
                                 success={shouldDuplicateButtonBeSuccess}
                                 text={translate('iou.reviewDuplicates')}
-                                style={[styles.flex1, styles.pr0]}
+                                style={[styles.flex1, styles.pr0, styles.mb3]}
                                 onPress={() => {
                                     Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
                                 }}
@@ -380,7 +380,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                         )}
                         {shouldShowSettlementButton && shouldUseNarrowLayout && (
                             <SettlementButton
-                                wrapperStyle={[styles.flex1]}
+                                wrapperStyle={[styles.flex1, styles.mb3]}
                                 onlyShowPayElsewhere={onlyShowPayElsewhere}
                                 currency={moneyRequestReport?.currency}
                                 confirmApproval={confirmApproval}
@@ -403,13 +403,14 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                                 policy={policy}
                                 report={moneyRequestReport}
                                 connectionName={connectedIntegration}
+                                wrapperStyle={styles.mb3}
                             />
                         )}
                         {shouldShowSubmitButton && shouldUseNarrowLayout && (
                             <Button
                                 success={isWaitingForSubmissionFromCurrentUser}
                                 text={translate('common.submit')}
-                                style={[styles.flex1, styles.pr0]}
+                                style={[styles.flex1, styles.pr0, styles.mb3]}
                                 onPress={() => IOU.submitReport(moneyRequestReport)}
                                 isDisabled={shouldDisableSubmitButton}
                             />
@@ -418,7 +419,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                             <Button
                                 success
                                 text={translate('iou.markAsCash')}
-                                style={[styles.flex1, styles.pr0]}
+                                style={[styles.flex1, styles.pr0, styles.mb3]}
                                 onPress={markAsCash}
                             />
                         )}
diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
index 2f96b9d7dfaf..1ce28bec4879 100644
--- a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
+++ b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
@@ -1,4 +1,5 @@
 import React, {useCallback, useMemo, useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -26,12 +27,15 @@ type ExportWithDropdownMenuProps = {
     connectionName: ConnectionName;
 
     dropdownAnchorAlignment?: AnchorAlignment;
+
+    wrapperStyle?: StyleProp<ViewStyle>;
 };
 
 function ExportWithDropdownMenu({
     policy,
     report,
     connectionName,
+    wrapperStyle,
     dropdownAnchorAlignment = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
@@ -120,7 +124,7 @@ function ExportWithDropdownMenu({
                 onOptionSelected={({value}) => savePreferredExportMethod(value)}
                 options={dropdownOptions}
                 style={[shouldUseNarrowLayout && styles.flexGrow1]}
-                wrapperStyle={styles.flex1}
+                wrapperStyle={[styles.flex1, wrapperStyle]}
                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
             />
             <ConfirmModal

From 83c838bbca9a43400f78063233b201bbd46353d8 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 16 Oct 2024 23:49:06 +0700
Subject: [PATCH 09/12] fix: ui

---
 src/components/MoneyReportHeader.tsx                 | 12 ++++++------
 .../ReportActionItem/ExportWithDropdownMenu.tsx      |  6 +-----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 5b8b7efdebff..5a50ab773614 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -241,6 +241,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     };
 
     const statusBarProps = getStatusBarProps();
+    const hasButtons = isDuplicate || shouldShowSettlementButton || shouldShowExportIntegrationButton || shouldShowSubmitButton || hasAllPendingRTERViolations;
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
     const isWaitingForSubmissionFromCurrentUser = useMemo(
@@ -367,12 +368,12 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
             </HeaderWithBackButton>
             {isMoreContentShown && (
                 <View style={[styles.dFlex, styles.flexColumn, styles.pb3, styles.ph5, styles.borderBottom]}>
-                    <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
+                    <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3, shouldUseNarrowLayout && hasButtons && styles.mb3]}>
                         {isDuplicate && shouldUseNarrowLayout && (
                             <Button
                                 success={shouldDuplicateButtonBeSuccess}
                                 text={translate('iou.reviewDuplicates')}
-                                style={[styles.flex1, styles.pr0, styles.mb3]}
+                                style={[styles.flex1, styles.pr0]}
                                 onPress={() => {
                                     Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
                                 }}
@@ -380,7 +381,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                         )}
                         {shouldShowSettlementButton && shouldUseNarrowLayout && (
                             <SettlementButton
-                                wrapperStyle={[styles.flex1, styles.mb3]}
+                                wrapperStyle={[styles.flex1]}
                                 onlyShowPayElsewhere={onlyShowPayElsewhere}
                                 currency={moneyRequestReport?.currency}
                                 confirmApproval={confirmApproval}
@@ -403,14 +404,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                                 policy={policy}
                                 report={moneyRequestReport}
                                 connectionName={connectedIntegration}
-                                wrapperStyle={styles.mb3}
                             />
                         )}
                         {shouldShowSubmitButton && shouldUseNarrowLayout && (
                             <Button
                                 success={isWaitingForSubmissionFromCurrentUser}
                                 text={translate('common.submit')}
-                                style={[styles.flex1, styles.pr0, styles.mb3]}
+                                style={[styles.flex1, styles.pr0]}
                                 onPress={() => IOU.submitReport(moneyRequestReport)}
                                 isDisabled={shouldDisableSubmitButton}
                             />
@@ -419,7 +419,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                             <Button
                                 success
                                 text={translate('iou.markAsCash')}
-                                style={[styles.flex1, styles.pr0, styles.mb3]}
+                                style={[styles.flex1, styles.pr0]}
                                 onPress={markAsCash}
                             />
                         )}
diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
index 1ce28bec4879..2f96b9d7dfaf 100644
--- a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
+++ b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
@@ -1,5 +1,4 @@
 import React, {useCallback, useMemo, useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -27,15 +26,12 @@ type ExportWithDropdownMenuProps = {
     connectionName: ConnectionName;
 
     dropdownAnchorAlignment?: AnchorAlignment;
-
-    wrapperStyle?: StyleProp<ViewStyle>;
 };
 
 function ExportWithDropdownMenu({
     policy,
     report,
     connectionName,
-    wrapperStyle,
     dropdownAnchorAlignment = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
@@ -124,7 +120,7 @@ function ExportWithDropdownMenu({
                 onOptionSelected={({value}) => savePreferredExportMethod(value)}
                 options={dropdownOptions}
                 style={[shouldUseNarrowLayout && styles.flexGrow1]}
-                wrapperStyle={[styles.flex1, wrapperStyle]}
+                wrapperStyle={styles.flex1}
                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
             />
             <ConfirmModal

From 907ab0a2c13bb554463c7520f78ad617db9f7ac5 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 16 Oct 2024 23:52:06 +0700
Subject: [PATCH 10/12] fix: lint

---
 src/components/MoneyReportHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 5a50ab773614..683219003539 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -241,7 +241,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     };
 
     const statusBarProps = getStatusBarProps();
-    const hasButtons = isDuplicate || shouldShowSettlementButton || shouldShowExportIntegrationButton || shouldShowSubmitButton || hasAllPendingRTERViolations;
+    const hasButtons = isDuplicate || shouldShowSettlementButton || !!shouldShowExportIntegrationButton || shouldShowSubmitButton || hasAllPendingRTERViolations;
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
     const isWaitingForSubmissionFromCurrentUser = useMemo(

From cb4be38d22d679569cd038bd1a4a0a3f4c679a00 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 16 Oct 2024 23:59:28 +0700
Subject: [PATCH 11/12] refactor: change logics to more precise

---
 src/components/MoneyReportHeader.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 683219003539..64f92ce42a7c 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -241,7 +241,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     };
 
     const statusBarProps = getStatusBarProps();
-    const hasButtons = isDuplicate || shouldShowSettlementButton || !!shouldShowExportIntegrationButton || shouldShowSubmitButton || hasAllPendingRTERViolations;
+    const shouldAddGapToContents =
+        shouldUseNarrowLayout &&
+        (isDuplicate || shouldShowSettlementButton || !!shouldShowExportIntegrationButton || shouldShowSubmitButton || hasAllPendingRTERViolations) &&
+        (!!statusBarProps || shouldShowNextStep);
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
     const isWaitingForSubmissionFromCurrentUser = useMemo(
@@ -367,8 +370,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 )}
             </HeaderWithBackButton>
             {isMoreContentShown && (
-                <View style={[styles.dFlex, styles.flexColumn, styles.pb3, styles.ph5, styles.borderBottom]}>
-                    <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3, shouldUseNarrowLayout && hasButtons && styles.mb3]}>
+                <View style={[styles.dFlex, styles.flexColumn, shouldAddGapToContents && styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
+                    <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
                         {isDuplicate && shouldUseNarrowLayout && (
                             <Button
                                 success={shouldDuplicateButtonBeSuccess}

From 729c6df20c7bc7888c90f04065df071ac5570cd5 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Thu, 17 Oct 2024 18:15:44 +0700
Subject: [PATCH 12/12] fix: remove redundant condition

---
 src/components/MoneyReportHeader.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 1c1b35d0a017..24829da73684 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -267,7 +267,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     };
 
     const statusBarProps = getStatusBarProps();
-    const shouldAddGapToContents = shouldUseNarrowLayout && shouldShowAnyButton && (!!statusBarProps || shouldShowNextStep);
+    const shouldAddGapToContents =
+        shouldUseNarrowLayout &&
+        (isDuplicate || shouldShowSettlementButton || !!shouldShowExportIntegrationButton || shouldShowSubmitButton || shouldShowMarkAsCashButton) &&
+        (!!statusBarProps || shouldShowNextStep);
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
     const isWaitingForSubmissionFromCurrentUser = useMemo(