diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index b44ba1b38a056..34e8b9daa8d01 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -422,7 +422,6 @@ function MoneyReportHeader({
};
const statusBarProps = getStatusBarProps();
- const shouldAddGapToContents = shouldUseNarrowLayout && shouldShowSelectedTransactionsButton && (!!statusBarProps || shouldShowNextStep);
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -870,8 +869,6 @@ function MoneyReportHeader({
const shouldShowBackButton = shouldDisplayBackButton || shouldUseNarrowLayout;
- const isMoreContentShown = shouldShowNextStep || !!statusBarProps;
-
const connectedIntegrationName = connectedIntegration ? translate('workspace.accounting.connectionName', {connectionName: connectedIntegration}) : '';
const unapproveWarningText = useMemo(
() => (
@@ -942,6 +939,41 @@ function MoneyReportHeader({
);
+ const moreContentUnfiltered = [
+ shouldShowSelectedTransactionsButton && shouldDisplayNarrowVersion && (
+
+ null}
+ options={selectedTransactionsOptions}
+ customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
+ isSplitButton={false}
+ shouldAlwaysShowDropdownMenu
+ wrapperStyle={styles.w100}
+ />
+
+ ),
+ shouldShowNextStep && !!optimisticNextStep?.message?.length && (
+
+ ),
+ shouldShowNextStep && !optimisticNextStep && !!isLoadingInitialReportActions && !isOffline && ,
+ !!statusBarProps && (
+
+ ),
+ ];
+ const moreContent = moreContentUnfiltered.filter(Boolean);
+ const isMoreContentShown = moreContent.length > 0;
+ const shouldAddGapToContents = moreContent.length > 1;
+
return (
)}
- {isMoreContentShown && (
-
- {shouldShowSelectedTransactionsButton && shouldDisplayNarrowVersion && (
-
- null}
- options={selectedTransactionsOptions}
- customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
- isSplitButton={false}
- shouldAlwaysShowDropdownMenu
- wrapperStyle={styles.w100}
- />
-
- )}
- {shouldShowNextStep && !!optimisticNextStep?.message?.length && }
- {shouldShowNextStep && !optimisticNextStep && !!isLoadingInitialReportActions && !isOffline && }
- {!!statusBarProps && (
-
- )}
-
- )}
+ {isMoreContentShown && {moreContent}}
{isHoldMenuVisible && requestType !== undefined && (