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

@shawnborton

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:

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?

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

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

@zanyrenney

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

@situchan

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

@quinthar

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

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

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

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)

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

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

I am PR author for actionable mention whispers handling regressions in a follow up PR #34560, happy to include this in the PR

That would be wonderful!

@ishpaul777

Not overdue. @ishpaul777 please link this issue in your PR

@ishpaul777

@ishpaul777 I think we can close this and manage the change in your PR right? I don't think we need to keep this separate as you'll tackle it in that PR.

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 25, 2024

melvin-bot commented on Jan 25, 2024

melvin-bot commented on Jan 25, 2024

kbecciv commented on Jan 25, 2024

bernhardoj commented on Jan 25, 2024

Proposal

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

What is the root cause of that problem?

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

BhuvaneshPatil commented on Jan 25, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

shawnborton commented on Jan 25, 2024

shawnborton commented on Jan 25, 2024

ishpaul777 commented on Jan 25, 2024

shawnborton commented on Jan 25, 2024

situchan commented on Jan 29, 2024

zanyrenney commented on Jan 30, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions