[Regression test steps needed][$1000] BUG: Add attachment send button is too large

[neil-marcellini]

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. Log in with any account
2. Open a chat and click the plus button to add an attachment, select a file to upload

Expected Result:

The send button is centered and has a normal width

Actual Result:

The send button stretches across the whole modal

Workaround:

Ignore the visual oddity

Platform:

All? Needs testing.

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

Version Number: v1.2.34-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: @neil-marcellini
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1669828932546429

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016b240866a2f9a693
• Upwork Job ID: 1598035611785265152

[melvin-bot]

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

[allroundexperts]

What is the required width @neil-marcellini?

[neil-marcellini]

cc @Expensify/design

[Pujan92]

Proposal

To make it normal at center postion we can update the style for the button.

App/src/styles/styles.js

Lines 472 to 474 in 2881f18

	buttonConfirm: {
	margin: 20,
	},

alignItems: 'center',

[shawnborton]

As for the button, we want it to be full width on mobile but for desktop, maybe we just give it a larger min-width (like 300?) and center it like it's shown above?

Looks like we need to update the background color behind the PDF as well.

[Puneet-here]

Proposal

Add attachmentButtonBigScreen to styles.js

attachmentButtonBigScreen:{
        minWidth: 300,
        alignSelf: 'center'
    }

Pass {[styles.buttonConfirm, this.props.isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]} at style

App/src/components/AttachmentModal.js

Line 281 in 1f71832

style={[styles.buttonConfirm]}

small screen

big screen

We need to passkey={this.props.isSmallScreenWidth}. If we want the button size to change when decreasing screen size. Because of it the button will re render when screen size changes and the needed styles will be applied

[akshayasalvi]

Proposal

In the styles.js update the buttonConfirm with the following styles:

  buttonConfirm: {
    alignSelf: `center`,
    minWidth: 300
  }

Web Version

iOS version

[shawnborton]

For mobile/small devices, we should have the button extend to full width. Only desktop/wide devices should get the min-width.

[Puneet-here]

@shawnborton, can you please check my proposal

[shawnborton]

Yup that works for me, but let's have our contributor team file and review first.