[$250] Reports - Expense amount overlaps with the row border when expense report is opened in RHP

[jponikarchuk]

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.64-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exp https://github.com/Expensify/Expensify/issues/509856
Email or phone of affected tester (no customers): sdoinjsoidjsoijsiodjo@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 26.1 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create two expenses.
4. Open expense report.
5. Send a message.
6. Go to Reports > Chats.
7. Click on the message from Step 5.

Expected Result:

Expense amount will not overlap with the row border.

Actual Result:

Expense amount overlaps with the row border when expense report is opened in RHP.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021994220431576452717
• Upwork Job ID: 1994220431576452717
• Last Price Increase: 2025-11-28

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

[Eskalifer1]

Proposal

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

Reports - Expense amount overlaps with the row border when expense report is opened in RHP

What is the root cause of that problem?

Here we add padding 0 if its large screen:

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

Line 157 in 5d93183

style={[styles.p3, isLargeScreenWidth && styles.pr0]}

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

We should check for !shouldUseNarrowLayout or !(shouldUseNarrowLayout || isMediumScreenWidth) if needed

What alternative solutions did you explore? (Optional)

We can also include check for Wide RHP if needed
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[ikevin127]

@Eskalifer1's proposal makes sense, the RCA is partially correct and the solution of using !shouldUseNarrowLayout works.

I found the offending PR as #71448 where it seems that the isLargeScreenWidth && styles.pr0 was added as part of this issue to remove the right-side padding in cases like this (Reports -> Reports):

Note: Besides not being mentioned in the proposal - this was not the best choice from the PR author, should've kept the padding and instead remove extra spacing from the arrow icon - this way this issue wouldn't have existed.

Using !shouldUseNarrowLayout instead of isLargeScreenWidth keeps ☝️ this fixed while fixing our issue at the same time.

I guess an alternative / better solution here that would target the root cause could be to always keep the styles.p3 and for the screenshot displayed above: remove the extra spacing from the right side of arrow icon (current value is 14px-12px = 2px remaining -> would correct the issue without having to add this conditional p0 style).

Here's the ALT diff

diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
index f4a3a38847a..052c66e45f4 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
@@ -86,7 +86,7 @@ function MoneyRequestReportTransactionItem({
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth, isMediumScreenWidth, isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
+    const {isSmallScreenWidth, isMediumScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const theme = useTheme();
     const isPendingDelete = isTransactionPendingDelete(transaction);
     const pendingAction = getTransactionPendingAction(transaction);
@@ -154,7 +154,7 @@ function MoneyRequestReportTransactionItem({
                     columns={columns}
                     areAllOptionalColumnsHidden={areAllOptionalColumnsHidden}
                     isDisabled={isPendingDelete}
-                    style={[styles.p3, isLargeScreenWidth && styles.pr0]}
+                    style={[styles.p3]}
                     onButtonPress={() => {
                         handleOnPress(transaction.transactionID);
                     }}
diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx
index 50571bcabfc..dc87752fdb4 100644
--- a/src/components/TransactionItemRow/index.tsx
+++ b/src/components/TransactionItemRow/index.tsx
@@ -556,7 +556,7 @@ function TransactionItemRow({
                     {!!isLargeScreenWidth && !!onArrowRightPress && (
                         <PressableWithFeedback
                             onPress={() => onArrowRightPress?.()}
-                            style={[styles.p3Half, styles.pl0half, styles.justifyContentCenter, styles.alignItemsEnd]}
+                            style={[styles.p3Half, styles.pl0half, styles.pr0half, styles.justifyContentCenter, styles.alignItemsEnd]}
                             accessibilityRole={CONST.ROLE.BUTTON}
                             accessibilityLabel={CONST.ROLE.BUTTON}
                         >
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index e0c5ec07c68..947ccd3c917 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -575,6 +575,10 @@ export default {
         paddingRight: 0,
     },
 
+    pr0half: {
+        paddingRight: 2,
+    },
+
     pr1: {
         paddingRight: 4,
     },

🎀👀🎀 C+ reviewed