[HOLD for payment 2022-06-13] [$250] Update the IOU "Cancel" button so that it has a fixed size - reported by @Puneet-here

[mvtglobally]

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

---

Action Performed:

1. Request money from someone
2. Cancel the money request the button size will increase when loading

Expected Result:

Update the logic of the Cancel button so that it doesn't re-size at all.

Actual Result:

After being clicked, the IOU Cancel button size increases momentarily and then disappears. That's strange visually.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.56-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

XRecorder_Edited_31032022_001537.mp4

Upwork job link: https://www.upwork.com/jobs/~019f02e58e1d9ac630
Issue reported by: @Puneet-here
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1648666290760469

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @flaviadefaria (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

Triggered auto assignment to @francoisl (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[thesahindia]

Proposal

We can just set a minWidth for this button.
minWidth: 61 will be good for cancel/decline button and minWidth: 69 for spanish ones. We can add a function in StyleUtils which will return minWidth based on the preferredLocale.

Or instead of this we can just set the minWidth to larger one (that's what we did for the resend link button #6958)
We can add the style like this -

App/src/styles/styles.js

Lines 937 to 939 in 65432d6

	resendLinkButton: {
	minWidth: 124,
	},

We will have to use the style here and we can remove line 96-

App/src/components/ReportTransaction.js

Lines 92 to 97 in 65432d6

	style={[
	styles.buttonSmall,
	styles.chatItemComposeSecondaryRowOffset,
	styles.mb3,
	this.isBeingRejected() ? styles.w20 : styles.wAuto,
	]}