[HOLD for payment 2024-12-11] [$250] Android & iOS - Start chat - Add to group button is top-aligned instead of centered

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.68-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
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): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch ND or hybrid app
2. Open FAB > Start chat

Expected Result:

"Add to group" button will be centered on the right (web and mweb behavior)

Actual Result:

"Add to group" button is top-aligned on the right

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

Bug6679248_1732810860716.ScreenRecording_11-29-2024_00-18-18_1.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021862203018243480384
• Upwork Job ID: 1862203018243480384
• Last Price Increase: 2024-11-28
• Automatic offers:
• neonbhai | Contributor | 105126607

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[neonbhai]

Proposal

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

Android & iOS - Start chat - Add to group button is top-aligned instead of centered

What is the root cause of that problem?

From PR: #53223

We applied extra margin according to bottom inset to the Add to group button:

App/src/pages/NewChatPage.tsx

Lines 253 to 255 in 60e9c7c

	<Button
	onPress={() => toggleOption(item)}
	style={[styles.pl2, insets.bottom ? styles.mb5 : undefined]}

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

The bottom inset style is not needed for the button here, we should change it to:

<Button 
    ...
    style={[styles.pl2]}
/>

Result:

Before

After

[zanyrenney]

adding external

[melvin-bot]

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

[melvin-bot]

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

[zanyrenney]

cc @Expensify/design

[zanyrenney]

hey @fedirjh please can you review the proposal above?

[dubielzyk-expensify]

Looks like a bug worth solving. Thanks for highlighting 👍

[fedirjh]

@neonbhai Proposal looks good.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @carlosmiceli, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @neonbhai 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[neonbhai]

Thank you for assigning! Raising PR soon

[neonbhai]

The PR is ready for review

cc: @fedirjh

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.70-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix - Add to group button is top-aligned instead of centered #53365

If no regressions arise, payment will be issued on 2024-12-11. 🎊

For reference, here are some details about the assignees on this issue:

• @fedirjh requires payment through NewDot Manual Requests
• @neonbhai requires payment automatic offer (Contributor)

[melvin-bot]

@fedirjh @zanyrenney @fedirjh The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[zanyrenney]

@fedirjh please complete the checklist so i can pay this out. Payout will only be due once the checklist has been posted in here. Thank you!

[fedirjh]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: [CP Staging] Fix: Android edge-to-edge related inset/padding issues #53223 (comment)

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

  This is a minor UI change. A regression test is not necessary.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

Test:

Do we agree 👍 or 👎

[zanyrenney]

Thanks @fedirjh

[zanyrenney]

I have bumped @neonbhai to accept the Upwork job because it is still pending!

[zanyrenney]

payment summary is:

@fedirjh requires payment through NewDot Manual Requests - please request $250
@neonbhai requires payment automatic offer (Contributor) - paid $250 on upwork.

[melvin-bot]

@carlosmiceli, @fedirjh, @zanyrenney, @neonbhai Whoops! This issue is 2 days overdue. Let's get this updated quick!

[zanyrenney]

Updated the payment summary above, closing.