[Due for payment 2025-12-04] [$150] Distance - The track distance receipt in the preview is not centered on the route

[lanitochka17]

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.2.49-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1935/folder/13176744/41237166/1008201828
Email or phone of affected tester (no customers): sustinov@applausemail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the Expensify app
2. Create a WS
3. Create a Track distance with any two waypoints
4. Send this expense to the WS room
5. Note the expense preview

Expected Result:

In the preview, the distance expense should be aligned to the center of the route

Actual Result:

The track distance receipt in the preview is not centered on the route

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug7000758_1762878991168.Record_2025-11-11-19-31-05.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021988787055571017116
• Upwork Job ID: 1988787055571017116
• Last Price Increase: 2025-11-13

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

[TaduJR]

Proposal

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

When a track distance expense is created and the server generates a receipt thumbnail image, the map receipt is cropped in the transaction preview shown in the chat. The 256x256 square receipt image is being forced into a 256x144 (16:9 aspect ratio) container, causing the bottom portion of the map and route to be cut off and appear off-center.

What is the root cause of that problem?

The root cause is in the TransactionPreviewContent component where shouldUseAspectRatio is hardcoded to true for all receipt types:

App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Line 226 in 1e2c61e

shouldUseAspectRatio

This causes ReportActionItemImages to apply a 16:9 aspect ratio container (receiptPreviewAspectRatio style):

App/src/components/ReportActionItem/ReportActionItemImages.tsx

Lines 61 to 62 in 1e2c61e

	if (shouldUseAspectRatio) {
	layoutStyle.push(styles.receiptPreviewAspectRatio);

App/src/styles/index.ts

Lines 4215 to 4217 in 1e2c61e

	receiptPreviewAspectRatio: {
	aspectRatio: 16 / 9,
	},

With a 256px width container, the 16:9 aspect ratio creates a 144px height (256 × 9/16 = 144), but distance receipt images are 256x256 (1:1 ratio), resulting in vertical cropping that makes the map appear off-center.

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

Make shouldUseAspectRatio conditional based on whether the transaction is a map-based distance request. Distance receipts with map thumbnails are square (1:1 ratio) and should not be forced into the 16:9 landscape container designed for photo receipts.

File: src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Change 1: Import isMapDistanceRequest from TransactionUtils

App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Line 31 in 1e2c61e

import {isManagedCardTransaction as isCardTransactionUtils, isScanning} from '@libs/TransactionUtils';

-import {isManagedCardTransaction as isCardTransactionUtils, isScanning} from '@libs/TransactionUtils';
+import {isManagedCardTransaction as isCardTransactionUtils, isMapDistanceRequest, isScanning} from '@libs/TransactionUtils';

Change 2: Make shouldUseAspectRatio conditional

App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Lines 221 to 227 in 1e2c61e

	<ReportActionItemImages
	images={receiptImages}
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	isHovered={isHovered || isTransactionScanning}
	size={1}
	shouldUseAspectRatio
	/>

                <View style={[(isTransactionScanning || isWhisper) && [styles.reportPreviewBoxHoverBorder, styles.reportContainerBorderRadius]]}>
                    <ReportActionItemImages
                        images={receiptImages}
                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                        isHovered={isHovered || isTransactionScanning}
                        size={1}
-                        shouldUseAspectRatio
+                        shouldUseAspectRatio={!isMapDistanceRequest(transaction)}
                    />

Why isMapDistanceRequest instead of isDistanceRequest:

The isMapDistanceRequest check is more specific and correct:

App/src/libs/TransactionUtils/index.ts

Lines 188 to 197 in 1e2c61e

	function isMapDistanceRequest(transaction: OnyxEntry<Transaction>): boolean {
	// This is used during the expense creation flow before the transaction has been saved to the server
	if (lodashHas(transaction, 'iouRequestType')) {
	return transaction?.iouRequestType === CONST.IOU.REQUEST_TYPE.DISTANCE_MAP;
	}
	// This is the case for transaction objects once they have been saved to the server
	return hasDistanceCustomUnit(transaction);
	}

• isMapDistanceRequest: Only matches distance requests that have map-based routes (which generate 256x256 square thumbnails with embedded maps)
• isDistanceRequest: Matches ALL distance requests including manual distance entry (which don't have map images)

Since only map-based distance requests generate the square receipt images that are affected by this issue, isMapDistanceRequest is the precise check we need.

This ensures:

• Map distance receipts (256×256) use a max-height of 160px container and maintain their 1:1 aspect ratio (displaying at 160×160px)
• Manual distance requests and photo receipts continue using the 16:9 aspect ratio container as before (displaying at 256×144px)

[VictoriaExpensify]

Oh yeah, we should fix this. It seems like a fairly simple fix so I'm going to drop the bounty on this a bit. LMK if I have overlooked anything relating to the complexity.

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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

[TaduJR]

Hello @hoangzinh

What do you think of my Proposal