[HOLD for payment 2025-01-30] [$250] EReceipt thumbnail is being cut off at the bottom.

[m-natarajan]

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: 9.0.80-6
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @jayeshmangwani
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Press the FAB button.
2. Select Create Expense.
3. Tap Scan and choose a file.
4. Upload an invalid image file (example provided below).
5. Select any recipient.
6. Observe the default thumbnail for the receipt.

Expected Result:

EReceipt thumbnail should be fully visible with rounded corners.

Actual Result:

EReceipt thumbnail is partially cut off at the bottom.

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

Screen.Recording.2025-01-03.at.2.51.19.AM.mov

Example image for which Issue can be reproduced

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021879191008215577946
• Upwork Job ID: 1879191008215577946
• Last Price Increase: 2025-01-14
• Automatic offers:
• paultsimura | Reviewer | 105740538

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

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

[jayeshmangwani]

Proposal

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

EReceipt thumbnail is being cut off at the bottom.

What is the root cause of that problem?

The ReceiptImage component is used to display receipts. When either isThumbnail or isEReceipt is true,

App/src/components/ReceiptImage.tsx

Lines 130 to 134 in 41c38e3

	if (isEReceipt || isThumbnail) {
	const props = isThumbnail && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true};
	return (
	<View style={style ?? [styles.w100, styles.h100]}>
	<EReceiptThumbnail

we render the EReceiptThumbnail component. However, the overflow: hidden styling applied to the EReceiptThumbnail is causing the thumbnail to get cut off at the bottom.

App/src/components/EReceiptThumbnail.tsx

Lines 100 to 104 in 41c38e3

	return (
	<View
	style={[
	styles.flex1,
	primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : {},

In the MoneyRequestConfirmationListFooter, the parent View of ReceiptImage is assigned a height of 200, while the ReceiptImage component itself has a total height of 164. This mismatch results in the bottom 36 height being cut off due to the overflow: hidden property.

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 679 to 681 in 41c38e3

	<View style={styles.moneyRequestImage}>
	{isLocalFile && Str.isPDF(receiptFilename) ? (
	<PressableWithoutFocus

App/src/styles/index.ts

Lines 4458 to 4460 in 41c38e3

	moneyRequestImage: {
	height: 200,
	borderRadius: 16,

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

Pass flex: 1 to the parent component (PressableWithoutFocus) of ReceiptImage.

This ensures the child ReceiptImage will occupy the full height of the parent component (200).
It resolves the overflow issue without impacting other styles.

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 711 to 714 in 41c38e3

	disabledStyle={styles.cursorDefault}
	>
	<ReceiptImage
	isThumbnail={isThumbnail}

+ style={styles.flex1}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

I believe automated tests aren't useful for purely UI mismatching issues/bugs.

What alternative solutions did you explore? (Optional)

Solution 2:
Remove the overflow: hidden style from the EReceiptThumbnail component entirely.

• initially overflow: hidden was added on this PR [NoQA] [Wave 8 - ECard Transactions] Create eReceiptThumbnail and eReceipt components #29075, not sure why it was added but when I was testing, shows that the ReceiptImage and EReceiptThumbnail UI works as expected without overflow style.

Alternative to Solution 2:
If removing the overflow: hidden property from EReceiptThumbnail poses a risk of regression, we can limit its use specifically to the EReceiptThumbnail within the EReceipt component. To achieve this, we can create a new style prop for ReceiptImage and apply overflow: hidden conditionally in the EReceipt component. This approach ensures no unintended side effects on ReceiptImage while preserving the existing styling logic.

[melvin-bot]

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

[melvin-bot]

@slafortune Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@slafortune 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@slafortune 10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@slafortune @paultsimura this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[paultsimura]

Reviewing today 👀

[paultsimura]

@jayeshmangwani removing overflow: hidden will cause regressions - you can check it in the storybook.

Before:

After:

[jayeshmangwani]

you can check it in the storybook.

@paultsimura Cool, I didn't encounter this regression issue while testing the page. However I also feel, removing the overflow might lead to some unexpected side effects. Could you please review my main proposed change of adding flex to the parent View and share your thoughts on it?

[paultsimura]

The proposal by @jayeshmangwani LGTM.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[lakchote]

@jayeshmangwani's proposal LGTM.

[melvin-bot]

📣 @paultsimura 🎉 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]

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.88-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fixed an issue where the e-receipt thumbnail overflowed and was cut off at the bottom. #55455

If no regressions arise, payment will be issued on 2025-01-30. 🎊

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

• @paultsimura requires payment automatic offer (Reviewer)
• @jayeshmangwani requires payment through NewDot Manual Requests
• @jayeshmangwani requires payment through NewDot Manual Requests

[melvin-bot]

@paultsimura / @jayeshmangwani @slafortune @paultsimura / @jayeshmangwani 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]

[paultsimura]

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: N/A

• [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.

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

Test:

1. Press the FAB button.
2. Select Create Expense.
3. Tap Scan and choose a file.
4. Upload an image file in the .tiff format
5. Select any recipient.
6. Verify the default thumbnail for the receipt is fully visible and not cropped on the bottom.

Do we agree 👍 or 👎

[slafortune]

@paultsimura role C+ - paid $250 via UpWorks

@jayeshmangwani Role Contributor - requires payment through NewDot Manual owed $250

[garrettmknight]

$250 approved for @jayeshmangwani