[$500] Expense - The gap between buttons in Concierge whisper is too wide

[kbecciv]

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: 1.4.31.1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1706185611151319

Action Performed:

1. User A sends a payment to User B. Then User B @mentions user A in that same IOU thread.

Expected Result:

The space between the two buttons should only be 8-12px

Actual Result:

The gap between buttons in Concierge whisper is too wide

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010f9c7527fb2a6675
• Upwork Job ID: 1750566867979767808
• Last Price Increase: 2024-01-25

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~010f9c7527fb2a6675

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[bernhardoj]

Proposal

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

The gap between invite and do nothing button is too big.

What is the root cause of that problem?

The gap is set to 16 here.

App/src/components/ReportActionItem/ActionableItemButtons.tsx

Line 24 in 95631f6

<View style={[styles.flexRow, styles.gap4]}>

Instead of 8/12

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

Updat the gap to gap2 or gap3

[BhuvaneshPatil]

Proposal

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

Spacing between buttons is wide

What is the root cause of that problem?

We are using gap4 here, that's value is 16

App/src/components/ReportActionItem/ActionableItemButtons.tsx

Lines 24 to 35 in 95631f6

	<View style={[styles.flexRow, styles.gap4]}>
	{props.items?.map((item) => (
	<Button
	key={item.key}
	style={[styles.mt2]}
	onPress={item.onPress}
	text={translate(item.text)}
	small
	success={item.isPrimary}
	/>
	))}
	</View>

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

use gap3 or gap2

What alternative solutions did you explore? (Optional)

[shawnborton]

I think we should do 8px as the solution, just to make that clear. cc @Expensify/design in case you disagree.

[shawnborton]

Also, would we have any interest in doing this one internally? Paying out $500 just for a tiny change seems a bit extreme, no?