Give the error row dismiss button a padded hit area by MelvinBot · Pull Request #102900 · Expensify/App

MelvinBot · 2026-10-02T14:34:32Z

Explanation of Change

The dismiss "X" in MessagesRow (the error row rendered by OfflineWithFeedback → ErrorMessageRow) was a bare 20×20 icon inside a PressableWithoutFeedback with no style. Its hit area was only the glyph, and the only spacing came from the row's horizontal margins. That is why the "X" looked cramped, with no vertical padding.

This PR:

Adds styles.touchableButtonImage (40×40, centered) to the dismiss pressable in MessagesRow. This is the same style other close buttons use (for example PinButton, ReferralProgramCTA). The icon now has 10px of padding on every side, and the fix applies to every MessagesRow consumer.
Drops styles.mr2 from errorRowStyles on the report action error rows (ReportActionItem, ReportActionItemParentAction, AncestorReportActionItem). The new padding already places the glyph 10px from the edge, so keeping mr2 would push the "X" further inward. Removing it keeps the "X" close to where it was.

Note for review: the padded button makes the error row at least 40px tall. Please check compact MessagesRow uses (for example workspace member rows) and get design sign-off.

AI tests run locally:

npm run typecheck: passed
npm run lint on changed files: passed
npm run react-compiler-compliance-check check on changed files: passed
npm test for tests/ui/ReportActionItemTest.tsx, tests/ui/ClearReportActionErrorsUITest.tsx, tests/unit/ReportActionItemSingleTest.tsx: 227 passed
Browser check on web: not completed. The local dev app went blank before the error row could be shown. The banner also needs a server error to appear.

Fixed Issues

$ #102076
PROPOSAL: #102076 (comment)

Tests

Trigger an error for any report
Alternatively, run this code snippet in a Dev console with the target report open

(async () => {
  const thread = await window.report;
  const reportID = thread?.parentReportID;
  const reportActionID = thread?.parentReportActionID;

  if (!reportID || !reportActionID) {
    throw new Error('The open report has no parent report/action');
  }

  const key = `reportActions_${reportID}`;
  const actions = await Onyx.get(key);
  const action = actions?.[reportActionID];

  if (!action) throw new Error('Parent report action not found');

  window.__mockReportError = {key, actions, reportActionID};
  await Onyx.set(key, {
    ...actions,
    [reportActionID]: {
      ...action,
      errors: {...(action.errors ?? {}), [`mock-${Date.now()}`]: 'Mock error from console'},
    },
  });

  console.log(`Mock error added to parent action ${reportActionID}`);
})();

Verify that "X" to dismiss the message has proper padding on all sides — both vertical and horizontal

Verify that no errors appear in the JS console

Offline tests

QA Steps

Trigger an error for any report
Alternatively, run this code snippet in a Dev console with the target report open

(async () => {
  const thread = await window.report;
  const reportID = thread?.parentReportID;
  const reportActionID = thread?.parentReportActionID;

  if (!reportID || !reportActionID) {
    throw new Error('The open report has no parent report/action');
  }

  const key = `reportActions_${reportID}`;
  const actions = await Onyx.get(key);
  const action = actions?.[reportActionID];

  if (!action) throw new Error('Parent report action not found');

  window.__mockReportError = {key, actions, reportActionID};
  await Onyx.set(key, {
    ...actions,
    [reportActionID]: {
      ...action,
      errors: {...(action.errors ?? {}), [`mock-${Date.now()}`]: 'Mock error from console'},
    },
  });

  console.log(`Mock error added to parent action ${reportActionID}`);
})();

Verify that "X" to dismiss the message has proper padding on all sides — both vertical and horizontal

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Co-authored-by: Eugene Voloshchak <eVoloshchak@users.noreply.github.com>

MelvinBot · 2026-10-02T14:34:52Z

I created this PR from an upstream branch since I don't have push access to your fork.

To take ownership of this branch and be able to push updates, run:

git remote add upstream https://github.com/Expensify/App.git
git fetch upstream claude-messagesRowDismissButtonPadding
git checkout -b claude-messagesRowDismissButtonPadding upstream/claude-messagesRowDismissButtonPadding
git push -u origin claude-messagesRowDismissButtonPadding

Then you can close this PR and open a new one from your fork.

codecov · 2026-10-02T14:37:53Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/components/MessagesRow.tsx	`92.85% <ø> (ø)`
...rc/pages/inbox/report/AncestorReportActionItem.tsx	`100.00% <ø> (ø)`
src/pages/inbox/report/ReportActionItem.tsx	`91.09% <ø> (ø)`
src/pages/inbox/report/ReportActionItemCreated.tsx	`97.77% <100.00%> (ø)`
...ages/inbox/report/ReportActionItemParentAction.tsx	`96.87% <100.00%> (ø)`
... and 46 files with indirect coverage changes

MelvinBot · 2026-10-02T14:52:29Z

🤖 Android test steps verification results: ✅ pass

On standalone Android NewDot, the dismiss "X" now has a 40×40dp hit area with even padding on all sides, and tapping it dismisses the error row. The exact "report status has changed" server error can't be produced from the client, so I used Troubleshoot > "Simulate failing network requests" to create a real report-action error in the same MessagesRow component.

Step	Status
An error row with a dismiss "X" is visible on a report With "Simulate failing network requests" turned on, sending a message in the Concierge chat showed the error "Unexpected error posting the comment. Please try again later." with a dismiss "X". The row renders through `MessagesRow`/`ErrorMessageRow`.	✅
The "X" has vertical and right padding and is not cramped (about 40×40 tap area) Accessibility bounds: the button is 105×105px, which is 40dp at 2.625x density and matches `styles.touchableButtonImage`. The icon is 53×52px. Padding is 26px left, 26px right, 26px top, and 27px bottom.	✅
Tapping the "X" dismisses the error row Tapping Dismiss removed the failed-comment row, which is the expected result for a failed comment. A separate error row ("Unexpected error creating this chat") stayed in place.	✅

view run · view recording

MelvinBot · 2026-10-02T15:16:22Z

🤖 Web test steps verification results: ⚠️ partial

On dev NewDot web, the dismiss "X" has visible padding on all sides, and clicking it dismisses the error row. I could not read the JS console or measure the exact 40×40 hit area with the web tooling, so those two checks rely on visual evidence only.

Step	Status
An error row with a dismiss "X" is visible on a report The "report status has changed" server error can't be produced from the client. Instead, I turned on Troubleshoot > "Simulate failing network requests" and sent a message in the Concierge chat. This showed "Unexpected error posting the comment. Please try again later." with a dismiss "X", rendered by the same `MessagesRow`/`ErrorMessageRow` component.	✅
The "X" has vertical and right padding and is not cramped (about 40×40 click area) The close-up shows clear space above, below, and to the right of the "X". The web tooling does not expose element bounds, so I could not measure the 40×40 area. The Android run measured it at exactly 40×40dp.	✅
Clicking the "X" dismisses the error row Clicking Dismiss removed the failed message and its error row from the thread.	✅
No errors appear in the JS console Not verified. The web tooling cannot read the JS console. No error overlays appeared, and the `AddComment` requests returned HTTP 200 (the failure is simulated on the client).	⚠️

view run · view recording

eVoloshchak · 2026-10-14T19:07:00Z

@MelvinBot, pull the latest main

…missButtonPadding Co-authored-by: Eugene Voloshchak <eVoloshchak@users.noreply.github.com>

MelvinBot · 2026-10-14T19:25:16Z

I merged the latest main into this branch and pushed it (merge commit a9e7ba4). There were no conflicts.

view run

eVoloshchak · 2026-10-25T15:04:38Z

@MelvinBot, pull the latest main

…missButtonPadding Co-authored-by: Eugene Voloshchak <eVoloshchak@users.noreply.github.com>

MelvinBot · 2026-10-25T15:16:27Z

🤖 I merged the latest main into this branch and pushed it (6d5e4ee484c). The merge had no conflicts, and the PR still changes the same 4 files.

view run

eVoloshchak · 2026-10-25T17:29:09Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified any copy / text that was added to the app is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If the PR adds or modifies the UI:
- I asked an AI agent to review the changes for accessibility issues and addressed its findings.
- I tested with a screen reader (VoiceOver on macOS) and verified all new/changed elements are reachable with a logical focus order.
- I verified all new/changed elements have meaningful accessible names and roles.
- I verified state changes are announced (e.g. checked/unchecked, expanded/collapsed, selected).
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

Android: mWeb Chrome

iOS: HybridApp

Simulator Screenshot - iPhone 17 - 2026-10-25 at 18 21 15

iOS: mWeb Safari

Simulator Screenshot - iPhone 17 - 2026-10-25 at 18 18 56

MacOS: Chrome / Safari

https://github.com/user-attachments/assets/b3b156b2-2c1d-4bed-8f1b-e11c355db00a

eVoloshchak · 2026-10-25T17:34:14Z

Trigger an error for any report
Alternatively, run this code snippet in a Dev console with the target report open

(async () => {
  const thread = await window.report;
  const reportID = thread?.parentReportID;
  const reportActionID = thread?.parentReportActionID;

  if (!reportID || !reportActionID) {
    throw new Error('The open report has no parent report/action');
  }

  const key = `reportActions_${reportID}`;
  const actions = await Onyx.get(key);
  const action = actions?.[reportActionID];

  if (!action) throw new Error('Parent report action not found');

  window.__mockReportError = {key, actions, reportActionID};
  await Onyx.set(key, {
    ...actions,
    [reportActionID]: {
      ...action,
      errors: {...(action.errors ?? {}), [`mock-${Date.now()}`]: 'Mock error from console'},
    },
  });

  console.log(`Mock error added to parent action ${reportActionID}`);
})();

Verify that "X" to dismiss the message has proper padding on all sides — both vertical and horizontal

eVoloshchak · 2026-10-25T17:35:14Z

@MelvinBot,

include this as Tests/QA tests in the checklist
check off every checkbox in the PR author checklist

MelvinBot · 2026-10-25T17:38:04Z

🤖 I updated the PR description:

I added your test steps to both the Tests and QA Steps sections and removed the TODO placeholders.
I checked off every item in the PR Author Checklist.

view run

eVoloshchak · 2026-10-25T17:42:06Z

@Expensify/design, could you review this one please? How does this look?

Before

dubielzyk-expensify · 2026-10-25T23:30:11Z

That looks better to my eyes 👍

shawnborton · 2026-10-26T09:17:22Z

Same here 👍

eVoloshchak · 2026-10-26T12:31:15Z

@MelvinBot, mark this as ready for review

MelvinBot · 2026-10-26T12:34:00Z

I marked this PR as ready for review.

view run

melvin-bot · 2026-10-26T12:34:03Z

@eVoloshchak Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

chatgpt-codex-connector · 2026-10-26T12:34:05Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-26T12:37:36.503663Z	`6d5e4ee`	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6d5e4ee484

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-10-26T12:37:33Z

                <Tooltip text={dismissText}>
                    <PressableWithoutFeedback
                        onPress={onDismiss}
+                        style={styles.touchableButtonImage}


Remove the stale margin from the created-action error row

When a room-creation error is rendered by ReportActionItemCreated, that caller still passes errorRowStyles={[styles.ml10, styles.mr2, styles.mb2]} at src/pages/inbox/report/ReportActionItemCreated.tsx:70. The new 40px pressable already places the 20px icon 10px from the edge, so the retained 8px right margin moves this dismiss icon 18px inward, unlike the equivalent report-action error rows updated in this commit. Remove styles.mr2 from that caller as well so this error state gets the intended alignment.

Useful? React with 👍 / 👎.

@MelvinBot, apply the feedback above

🤖 I removed styles.mr2 from the created-action error row and pushed it (b0434db0). The row now uses [styles.ml10, styles.mb2] in ReportActionItemCreated.tsx:70. This matches the other report-action error rows.

One more caller still passes styles.mr2: the wallet terms error row in WalletPage/index.tsx:895. Its dismiss "X" now sits 18px from the edge. Do you want me to remove it there too?

I couldn't run lint or Prettier in this environment. The change only removes one array item, so CI should confirm it.

Co-authored-by: Eugene Voloshchak <eVoloshchak@users.noreply.github.com>

melvin-bot · 2026-10-26T13:17:08Z

@AndrewGable Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

OSBotify · 2026-10-26T18:15:04Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2026-10-26T20:07:50Z

🚧 AndrewGable has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-10-26T20:14:55Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #102900 with the pinned Mobile-Expensify submodule.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-e845835b-82c6e2f-f63e64deb13d3a1bac6684ce6676cf48b9166e2d/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-e845835b-82c6e2f-cef2b11b1f73fc2d347a7cbbd142ada82be988e2/index.html

Web 🕸️
https://102900.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-10-26T20:56:17Z

🚀 Deployed to staging by https://github.com/AndrewGable in version: 9.5.21-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

MelvinBot · 2026-10-26T20:58:21Z

No help site update is needed. This PR only adds padding around the dismiss "X" on error rows, so no help article sentence becomes incorrect.

view run

OSBotify · 2026-10-27T00:05:02Z

🚀 Deployed to staging by https://github.com/AndrewGable in version: 9.5.23-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

MelvinBot · 2026-10-27T00:06:56Z

No help site update is needed. This PR only adds padding around the dismiss "X" on error rows, so no help article sentence becomes incorrect.

view run

OSBotify · 2026-10-27T22:05:47Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 9.5.23-3 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

Give the MessagesRow dismiss button a padded hit area

b2467c1

Co-authored-by: Eugene Voloshchak <eVoloshchak@users.noreply.github.com>

MelvinBot assigned eVoloshchak Oct 2, 2026

MelvinBot requested a review from a team October 2, 2026 14:34

melvin-bot Bot added Melvin-Test-Android Melvin-Test-Web Triggers Melvin to run the testing steps of the PR on web labels Oct 2, 2026

MelvinBot mentioned this pull request Oct 2, 2026

[Due for payment 2026-11-03] Report error banner - "X" dismiss button is missing vertical padding (padding too narrow) #102076

Open

2 of 7 tasks

Merge remote-tracking branch 'origin/main' into claude-messagesRowDis…

a9e7ba4

…missButtonPadding Co-authored-by: Eugene Voloshchak <eVoloshchak@users.noreply.github.com>

Merge remote-tracking branch 'origin/main' into claude-messagesRowDis…

6d5e4ee

…missButtonPadding Co-authored-by: Eugene Voloshchak <eVoloshchak@users.noreply.github.com>

MelvinBot marked this pull request as ready for review October 26, 2026 12:33

MelvinBot requested a review from a team as a code owner October 26, 2026 12:33

melvin-bot Bot requested review from eVoloshchak and removed request for a team October 26, 2026 12:34

melvin-bot Bot requested a review from joekaufmanexpensify October 26, 2026 12:34

melvin-bot Bot removed the request for review from a team October 26, 2026 12:34

chatgpt-codex-connector Bot reviewed Oct 26, 2026

View reviewed changes

Remove stale mr2 from created-action error row

b0434db

Co-authored-by: Eugene Voloshchak <eVoloshchak@users.noreply.github.com>

MelvinBot requested a review from a team as a code owner October 26, 2026 13:16

melvin-bot Bot requested review from AndrewGable and removed request for a team October 26, 2026 13:17

AndrewGable approved these changes Oct 26, 2026

View reviewed changes

AndrewGable merged commit e845835 into main Oct 26, 2026
43 of 44 checks passed

AndrewGable deleted the claude-messagesRowDismissButtonPadding branch October 26, 2026 18:06

OSBotify mentioned this pull request Oct 26, 2026

Deploy Checklist: New Expensify 2026-10-26 #105056

Closed

84 tasks done

Conversation

MelvinBot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

MelvinBot commented Oct 2, 2026

Uh oh!

codecov Bot commented Oct 2, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

MelvinBot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MelvinBot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eVoloshchak commented Oct 14, 2026

Uh oh!

MelvinBot commented Oct 14, 2026

Uh oh!

eVoloshchak commented Oct 25, 2026

Uh oh!

MelvinBot commented Oct 25, 2026

Uh oh!

eVoloshchak commented Oct 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

eVoloshchak commented Oct 25, 2026

Uh oh!

eVoloshchak commented Oct 25, 2026

Uh oh!

MelvinBot commented Oct 25, 2026

Uh oh!

eVoloshchak commented Oct 25, 2026

Uh oh!

dubielzyk-expensify commented Oct 25, 2026

Uh oh!

shawnborton commented Oct 26, 2026

Uh oh!

eVoloshchak commented Oct 26, 2026

Uh oh!

MelvinBot commented Oct 26, 2026

Uh oh!

melvin-bot Bot commented Oct 26, 2026

Uh oh!

chatgpt-codex-connector Bot commented Oct 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Oct 26, 2026

Choose a reason for hiding this comment

Uh oh!

eVoloshchak Oct 26, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot Oct 26, 2026

Choose a reason for hiding this comment

Uh oh!

melvin-bot Bot commented Oct 26, 2026

Uh oh!

Uh oh!

OSBotify commented Oct 26, 2026

Uh oh!

github-actions Bot commented Oct 26, 2026

Uh oh!

github-actions Bot commented Oct 26, 2026

Uh oh!

MelvinBot commented Oct 2, 2026 •

edited

Loading

codecov Bot commented Oct 2, 2026 •

edited by github-actions Bot

Loading

MelvinBot commented Oct 2, 2026 •

edited

Loading

MelvinBot commented Oct 2, 2026 •

edited

Loading

eVoloshchak commented Oct 25, 2026 •

edited

Loading

chatgpt-codex-connector Bot commented Oct 26, 2026 •

edited

Loading