Chat - "Pay" button is not completely fitted in request preview

[kbecciv]

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: 1.3.84.1
Reproducible in staging?: y
Reproducible in production?: n
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: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697387154663989

Action Performed:

1. Request money from a workspace chat.
2. Navigate to workspace chat.

Expected Result:

"Pay" button is fitted in the preview completely and no empty space on right

Actual Result:

"Pay" button is fitted in the preview completely and there is empty space.

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Recording.5004.mp4

MacOS: Desktop

View all open jobs on GitHub

[OSBotify]

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

[melvin-bot]

Triggered auto assignment to @hayata-suenaga (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[hungvu193]

Proposal

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

"Pay" button is not completely fitted in request preview

What is the root cause of that problem?

It's a regression from this PR: #29431
Where we tried to set the maxWidth of MoneyRequestPreview to variables.reportPreviewMaxWidth (302px) while we also used it for our SettlementButton in ReportPreview which had the width of 375px

App/src/styles/styles.ts

Lines 2635 to 2645 in 0e64161

	requestPreviewBox: {
	marginTop: 12,
	maxWidth: variables.reportPreviewMaxWidth,
	},
	moneyRequestPreviewBox: {
	backgroundColor: theme.cardBG,
	borderRadius: variables.componentBorderRadiusLarge,
	maxWidth: variables.reportPreviewMaxWidth,
	width: '100%',
	},

App/src/components/ReportActionItem/ReportPreview.js

Line 244 in 0e64161

style={[styles.requestPreviewBox]}

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

I'm not sure if we also want to limit the width of ReportPreview to 302px like MoneyRequestPreview but incase that's true, we also need to apply the maxWidth: variables.reportPreviewMaxWidth to our ReportPreview container View.

Otherwise, we should create a new style with the old maxWidth (maxWidth: variables.sideBarWidth) for our SettlementButton in ReportPreview.

What alternative solutions did you explore? (Optional)

N/A

[hungvu193]

oh it's dupe of this one: #29639

[hayata-suenaga]

nice thank you for letting us know