Expense - Pay elsewhere button and search icon are far apart

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.53-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+kh1610015@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Submit expense to the workspace chat
4. Go to expense report
5. Note the spacing between Pay elsewhere button and search icon
6. Go to Search
7. Note the spacing between Filters button and search icon

#Expected Result:
In the expense report (also workspaces page), the green button and search icon should not have big space
It should have the same spacing between Filters button and search icon in Step 7

Actual Result:

In the expense report (also workspaces page), the green button and search icon has big space

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6643734_1729716885434.20241024_045106.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @jasperhuangg (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[Tony-MK]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Pay elsewhere button and search icon are far apart

What is the root cause of that problem?

We are using styles.mr2 for the icon in HeaderWithBackButton making the header button seem further than it should.

App/src/components/HeaderWithBackButton/index.tsx

Line 181 in 5e975f5

additionalStyles={[styles.mr2]}

What changes do you think we should make in order to solve the problem?

Remove the styles.mr2 from additionalStyles.

[Krishna2323]

Proposal


Please re-state the problem that we are trying to solve in this issue.

Expense - Pay elsewhere button and search icon are far apart

What is the root cause of that problem?

• Padding right of 20px is used (styles.pr5).
  

  App/src/components/HeaderWithBackButton/index.tsx

  Line 194 in 5e975f5

  <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>

What changes do you think we should make in order to solve the problem?


• We can decrease to reduce the gap.
• Optionally, we can add conditional spacing, so that we keep 20px of right padding to the pay elsewhere button when search icon is not shown.

What alternative solutions did you explore? (Optional)

Result

[ChavdaSachin]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Expense - Pay elsewhere button and search icon are far apart

What is the root cause of that problem?

Search Button is outside this <View

App/src/components/HeaderWithBackButton/index.tsx

Lines 194 to 267 in 5e975f5

	<View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
	{children}
	{shouldShowDownloadButton && (
	<Tooltip text={translate('common.download')}>
	<PressableWithoutFeedback
	onPress={(event) => {
	// Blur the pressable in case this button triggers a Growl notification
	// We do not want to overlap Growl with the Tooltip (#15271)
	(event?.currentTarget as HTMLElement)?.blur();
	if (!isDownloadButtonActive) {
	return;
	}
	onDownloadButtonPress();
	temporarilyDisableDownloadButton();
	}}
	style={[styles.touchableButtonImage]}
	role="button"
	accessibilityLabel={translate('common.download')}
	>
	<Icon
	src={Expensicons.Download}
	fill={iconFill ?? StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
	/>
	</PressableWithoutFeedback>
	</Tooltip>
	)}
	{shouldShowGetAssistanceButton && (
	<Tooltip text={translate('getAssistancePage.questionMarkButtonTooltip')}>
	<PressableWithoutFeedback
	disabled={shouldDisableGetAssistanceButton}
	onPress={() => Navigation.navigate(ROUTES.GET_ASSISTANCE.getRoute(guidesCallTaskID, Navigation.getActiveRoute()))}
	style={[styles.touchableButtonImage]}
	role="button"
	accessibilityLabel={translate('getAssistancePage.questionMarkButtonTooltip')}
	>
	<Icon
	src={Expensicons.QuestionMark}
	fill={iconFill ?? theme.icon}
	/>
	</PressableWithoutFeedback>
	</Tooltip>
	)}
	{shouldShowPinButton && !!report && <PinButton report={report} />}
	{shouldShowThreeDotsButton && (
	<ThreeDotsMenu
	icon={threeDotsMenuIcon}
	iconFill={threeDotsMenuIconFill}
	disabled={shouldDisableThreeDotsButton}
	menuItems={threeDotsMenuItems}
	onIconPress={onThreeDotsButtonPress}
	anchorPosition={threeDotsAnchorPosition}
	shouldOverlay={shouldOverlayDots}
	shouldSetModalVisibility={shouldSetModalVisibility}
	/>
	)}
	{shouldShowCloseButton && (
	<Tooltip text={translate('common.close')}>
	<PressableWithoutFeedback
	onPress={onCloseButtonPress}
	style={[styles.touchableButtonImage]}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('common.close')}
	>
	<Icon
	src={Expensicons.Close}
	fill={iconFill ?? theme.icon}
	/>
	</PressableWithoutFeedback>
	</Tooltip>
	)}
	</View>
	{shouldDisplaySearchRouter && <SearchButton style={styles.mr5} />}

What changes do you think we should make in order to solve the problem?

Move SearchButton inside this View. and remove extra styling mr5 from searchButton

App/src/components/HeaderWithBackButton/index.tsx

Line 267 in 5e975f5

{shouldDisplaySearchRouter && <SearchButton style={styles.mr5} />}

App/src/components/HeaderWithBackButton/index.tsx

Lines 194 to 266 in 5e975f5

	<View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
	{children}
	{shouldShowDownloadButton && (
	<Tooltip text={translate('common.download')}>
	<PressableWithoutFeedback
	onPress={(event) => {
	// Blur the pressable in case this button triggers a Growl notification
	// We do not want to overlap Growl with the Tooltip (#15271)
	(event?.currentTarget as HTMLElement)?.blur();
	if (!isDownloadButtonActive) {
	return;
	}
	onDownloadButtonPress();
	temporarilyDisableDownloadButton();
	}}
	style={[styles.touchableButtonImage]}
	role="button"
	accessibilityLabel={translate('common.download')}
	>
	<Icon
	src={Expensicons.Download}
	fill={iconFill ?? StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
	/>
	</PressableWithoutFeedback>
	</Tooltip>
	)}
	{shouldShowGetAssistanceButton && (
	<Tooltip text={translate('getAssistancePage.questionMarkButtonTooltip')}>
	<PressableWithoutFeedback
	disabled={shouldDisableGetAssistanceButton}
	onPress={() => Navigation.navigate(ROUTES.GET_ASSISTANCE.getRoute(guidesCallTaskID, Navigation.getActiveRoute()))}
	style={[styles.touchableButtonImage]}
	role="button"
	accessibilityLabel={translate('getAssistancePage.questionMarkButtonTooltip')}
	>
	<Icon
	src={Expensicons.QuestionMark}
	fill={iconFill ?? theme.icon}
	/>
	</PressableWithoutFeedback>
	</Tooltip>
	)}
	{shouldShowPinButton && !!report && <PinButton report={report} />}
	{shouldShowThreeDotsButton && (
	<ThreeDotsMenu
	icon={threeDotsMenuIcon}
	iconFill={threeDotsMenuIconFill}
	disabled={shouldDisableThreeDotsButton}
	menuItems={threeDotsMenuItems}
	onIconPress={onThreeDotsButtonPress}
	anchorPosition={threeDotsAnchorPosition}
	shouldOverlay={shouldOverlayDots}
	shouldSetModalVisibility={shouldSetModalVisibility}
	/>
	)}
	{shouldShowCloseButton && (
	<Tooltip text={translate('common.close')}>
	<PressableWithoutFeedback
	onPress={onCloseButtonPress}
	style={[styles.touchableButtonImage]}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('common.close')}
	>
	<Icon
	src={Expensicons.Close}
	fill={iconFill ?? theme.icon}
	/>
	</PressableWithoutFeedback>
	</Tooltip>
	)}
	</View>

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Krishna2323]

PROPOSAL UPDATED

• Minor update in the main solution

[jasperhuangg]

Don't need to fix this