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 && (