[Hold for payment 2024-10-07][$250] Spacing in error message in Fields for Expensify Page are not consistent

[IuliiaHerets]

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: v9.0.29-6
Reproducible in staging?: Y
Reproducible in production?: N
Issue was found when executing this PR: #47957
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Access staging.new.expensify.com and sign in with a valid account
2. Open Settings > Switch to Expensify Classic
3. Select any reason and proceed to the next screen
4. Verify the next button is aligned at the bottom of the page
5. Submit the form with an empty response. Verify error is shown
6. Keep adding new line to the form input until it reaches the maximum height
7. Verify the input underline, form error, and the next button isn't overlap

Expected Result:

User expects consistent spacing between the "red dot - error messages" on all platforms at the bottom of the page

Actual Result:

The spacing is inconsistent between platforms, for example the spacing shows one way on iOS/Desktop and with another spacing on Web/mweb.

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021832083749373830381
• Upwork Job ID: 1832083749373830381
• Last Price Increase: 2024-09-13
• Automatic offers:
• alitoshmatov | Reviewer | 104008602

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

Triggered auto assignment to @francoisl (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @lschurr (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.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[MuaazArshad]

Edited by proposal-police: This proposal was edited at 2024-09-05 18:13:57 UTC.

Proposal

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

Spacing in error message in Fields for Expensify Page are not consistent

What is the root cause of that problem?

This is happening due to margin overlap.

Due to the different dimensions of the platforms, the margin overlap is different which is causing inconsistency.

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

The only feasible solution here is to see maxAutoGrowHeight from responseInputMaxHeight to variables.textInputAutoGrowMaxHeight here

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Line 158 in 6a9ed7a

maxAutoGrowHeight={responseInputMaxHeight}

as in

App/src/pages/iou/request/step/IOURequestStepDescription.tsx

Line 189 in 6a9ed7a

maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}

What alternative solutions did you explore? (Optional)

We can also solve this by setting the responseInputMaxHeight and removing some of the space for errors here

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Lines 99 to 119 in 6a9ed7a

	const responseInputMaxHeight = NumberUtils.roundDownToLargestMultiple(
	formMaxHeight -
	safeAreaInsetsBottomValue -
	safePaddingBottomStyleValue -
	formPaddingBottomValue -
	// Minus the height of the text component
	headerTitleHeight -
	// Minus the response input margins (multiplied by 2 to create the effect of margins on top and bottom).
	// marginBottom does not work in this case because the TextInput is in a ScrollView and will push the button beneath it out of view,
	// so it's maxHeight is what dictates space between it and the button.
	baseResponseInputContainerStyle.marginTop * 2 -
	// Minus the approximate size of a default button
	variables.componentSizeLarge -
	// Minus the height above the button for the form error text, accounting for 2 lines max.
	variables.lineHeightNormal * 2 -
	// Minus the margin between the button and the form error text
	styles.mb3.marginBottom,
	// Round down to the largest number of full lines
	styles.baseTextInput.lineHeight,
	);

[francoisl]

Demoting for now, this is not breaking anything.

---

@MuaazArshad thanks for the proposal. Were you able to identify which PR from the checklist caused the regression?

[MuaazArshad]

No, I was not able to identify which PR caused it.

[ahmedGaber93]

It seems related to #47957

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@francoisl, @lschurr, @alitoshmatov Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[trjExpensify]

The linked PR is in the regression period, I think @bernhardoj & @rayane-djouah should look at this as a regression.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[francoisl]

Yeah let's proceed with a fix.
@alitoshmatov can you review the existing proposal please? The proposed solution makes sense, though I can't tell if the proposed alternative is worth it.

[MuaazArshad]

@alitoshmatov bump!

[melvin-bot]

@francoisl, @lschurr, @alitoshmatov Eep! 4 days overdue now. Issues have feelings too...

[lschurr]

Bumped in Slack: https://expensify.slack.com/archives/C01GTK53T8Q/p1726526127801759

[alitoshmatov]

Okay we can go with @MuaazArshad 's proposal which changes max height of response input making it smaller and not reach bottom, like this:

C+ reviewed 🎀 👀 🎀

[melvin-bot]

Current assignee @francoisl is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @MuaazArshad You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[MuaazArshad]

I'll raise PR by EOD.

[MuaazArshad]

@lschurr I haven't got the Upwork offer for this issue.

[MuaazArshad]

@lschurr bump for payment!

[alitoshmatov]

PR went into production on 1st of October

[lschurr]

@MuaazArshad - since the PR went to production on Oct 1, today is the pay day. Sent your offer via Upwork.

[MuaazArshad]

Thank you. Accepted the offer.

[lschurr]

Payment summary:

• Contributor: $250 @MuaazArshad (paid in Upwork)
• Reviewer: $250 @alitoshmatov (paid in Upwork)