Make editable cell hover target full height by x-dev90 · Pull Request #96318 · Expensify/App

x-dev90 · 2026-07-16T14:21:18Z

Explanation of Change

This follow-up updates editable table cells so the hover target covers the full row height while keeping the visual layout unchanged.

The editable cell now extends into the row’s vertical padding area, with matching inner padding so the content remains visually aligned.

Fixed Issues

$ #93242
PROPOSAL: #93242 (comment)

Tests

Open the Spend table on a wide layout.
Hover over editable cells such as merchant, date, category, tag, and amount.
Verify the pencil appears when hovering anywhere within the full row height of the editable cell.
Verify the row/cell visual layout looks unchanged.
Click a pencil edit button.
Verify the cell enters edit mode.
Press Tab to focus an editable cell’s pencil button.
Verify the pencil becomes visible/focused.
Press Enter.
Verify the cell enters edit mode.
Open a report with multiple expenses.
Repeat the hover and edit checks on the report expense rows.
Verify no errors appear in the JS console.

Verify that no errors appear in the JS console

Offline tests

Same as tests.

QA Steps

Same as tests.

// TODO: These must be filled out, or the issue title must include "[No QA]."

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2026-07-17.at.6.14.38.PM.mov

Android: mWeb Chrome

Screen_Recording_20260717_182625_Chrome.mp4

iOS: Native

Screen.Recording.2026-07-17.at.6.32.19.PM.mov

iOS: mWeb Safari

Screen.Recording.2026-07-17.at.6.36.26.PM.mov

MacOS: Chrome / Safari

Screencast.From.2026-07-18.09-55-27.mp4

codecov · 2026-07-17T07:39:26Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
...s/TransactionItemRow/EditableCell/EditableCell.tsx	`54.76% <ø> (ø)`
src/components/TransactionItemRow/index.tsx	`83.87% <100.00%> (+0.26%)`	⬆️
src/styles/index.ts	`56.18% <ø> (ø)`
...em/TransactionListItem/TransactionListItemWide.tsx	`0.00% <0.00%> (ø)`
...ents/TransactionItemRow/TransactionItemRowWide.tsx	`98.37% <88.88%> (-0.77%)`	⬇️
...stReportView/MoneyRequestReportTransactionItem.tsx	`0.00% <0.00%> (ø)`
... and 29 files with indirect coverage changes

…proved alignment

melvin-bot · 2026-07-17T15:15:41Z

@nyomanjyotisa 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]

x-dev90 · 2026-07-17T15:33:41Z

@nyomanjyotisa I’m testing it now and will let you know once I’m done. Thanks.

x-dev90 · 2026-07-18T05:42:17Z

@nyomanjyotisa It’s ready for review. Thanks!

x-dev90 · 2026-07-18T06:42:22Z

@shawnborton, @dubielzyk-expensify could you please share you thoughts. thanks.

github-actions · 2026-07-20T02:29:24Z

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

github-actions · 2026-07-20T02:52:35Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #96318.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-4ef2cb331ef-24d465b-79ddecd3fc7d7dd671f437ea2d1c318dffafd00a/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-4ef2cb3-24d465b-a04c5c3f41506aff07a797829ff8d0fb80b7b45c/index.html

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

👀 View the workflow run that generated this build 👀

dubielzyk-expensify · 2026-07-20T03:11:38Z

This is working well for me. Curious to see what @Expensify/design thinks. A violation expense has some un-interactable area, but I think that's expected

shawnborton · 2026-07-20T12:56:19Z

Feels good to me too 👍

x-dev90 · 2026-07-21T04:19:19Z

@nyomanjyotisa, Gentle bump. thanks.

mallenexpensify · 2026-07-22T20:09:05Z

@nyomanjyotisa it's been 5 days since a review which is unacceptable, please prioritize this PR. Thx.

nyomanjyotisa

The behavior looks correct in testing. I found one small styling-guideline issue before completing the reviewer checklist.

nyomanjyotisa · 2026-07-23T11:30:08Z

+            justifyContent: 'center',
+        },
+
+        editableCellFullHeightHoverTarget: {


Per STYLING.md, single-use styles should use existing helpers. Both editableCellFullHeightHoverTarget and transactionItemRowWide are used once and can be replaced with [styles.flex1, styles.w100, styles.justifyContentCenter] and styles.alignSelfStretch, respectively. Could we remove those two styles? editableCellColumn is used across six columns, so keeping that shared style makes sense.

Thanks, addressed. I removed the two single-use styles and replaced them with the existing style helpers, while keeping the shared editableCellColumn style.

Resolved ✅

…mproved layout

nyomanjyotisa · 2026-07-24T03:55:07Z

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 proper code patterns were followed (see Reviewing the code)
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and 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 that this PR follows the guidelines as stated in the Review Guidelines
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 a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
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.
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-pr96318.mp4

Android: mWeb Chrome

Android-mWeb-pr96318.mp4

iOS: HybridApp

ios-pr96318.mp4

iOS: mWeb Safari

ios-mWeb-pr96318.mp4

MacOS: Chrome / Safari

Chrome-pr96318.mp4

Safari-pr96318.mp4

nyomanjyotisa

LGTM!

x-dev90 · 2026-07-24T06:23:31Z

@MonilBhavsar, I'm doing another round of testing. Could you please hold off on merging this for now? Thanks!

MonilBhavsar

Okay, feel free to request a review once done

…layout

x-dev90 · 2026-07-24T10:03:37Z

@nyomanjyotisa I found and fixed a regression affecting rows with validation messages, such as “Missing category.”
Previously, the pencil icon appeared too close to the top of those rows. It is now positioned consistently with rows that do not have a validation message.

Before:

Screencast.From.2026-07-24.14-31-21.mp4

After:

Screencast.From.2026-07-24.12-45-36.fi.mp4

x-dev90 · 2026-07-25T03:15:46Z

@nyomanjyotisa, could you please take another look, when you get a chance. thanks.

nyomanjyotisa

The latest validation-row fix works in the regular Spend/report tables, and the focused tests pass. I found two layout regressions in related paths; please address the inline comments.

nyomanjyotisa · 2026-07-25T12:10:18Z

                        columns={columns}
                        isDisabled={isPendingDelete}
-                        style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]}
+                        style={!shouldUseNarrowLayout ? [styles.ph3, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]}


At medium widths, line 247 renders the narrow row while this condition remains false. This removes its vertical padding: a clean row drops from 56px to 40px, and a validation row from 84px to 68px. Could we preserve the previous padding when the effective row layout is narrow?

nyomanjyotisa · 2026-07-25T12:10:18Z

                testID="transaction-item-row"
            >
-                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.tableRowHeight]}>


This min-height affects every wide TransactionItemRow, but SearchStaticList and TransactionGroupListExpanded still add styles.pv2. I reproduced expanded-group rows at 72px—or 94px with a validation message—versus 56px/78px in the regular table. Could we preserve the existing row heights in the remaining callers?

MonilBhavsar

Awaiting feedback from author

…tTransactionItemBody

x-dev90 · 2026-07-27T16:19:47Z

@nyomanjyotisa Thanks, I addressed both layout regressions:

Preserved the original vertical padding for medium-width report rows when they render the narrow layout.
Scoped the full-height editable-cell hover layout to the regular Spend table and wide report expense rows, so static Search and expanded-group rows retain their existing heights.
Adjusted validation rows to preserve their original overall height and spacing while keeping the editable-cell hover target full height.

Could you please take another look when you get a chance?

fix: make editable cell hover target full height

8fa4c10

melvin-bot Bot assigned x-dev90 Jul 16, 2026

fix: remove full height hover target from editable cell

e2b4c22

x-dev90 added 4 commits July 17, 2026 12:20

Merge branch 'main' into fix/full-height-editable-cell-hover-target

e0b811c

fix: adjust editable cell hover target styles for better layout

e82ffe2

fix: update padding for editable cell full height hover target for im…

7dc9385

…proved alignment

Merge branch 'main' into fix/full-height-editable-cell-hover-target

8628ae5

x-dev90 marked this pull request as ready for review July 17, 2026 15:15

x-dev90 requested review from a team as code owners July 17, 2026 15:15

melvin-bot Bot requested review from nyomanjyotisa and trjExpensify and removed request for a team July 17, 2026 15:15

fix: update styles for editable cells to improve layout and alignment

4ef2cb3

nyomanjyotisa reviewed Jul 23, 2026

View reviewed changes

x-dev90 added 2 commits July 23, 2026 17:42

fix: refactor styles for editable cell and transaction item row for i…

49b551e

…mproved layout

Merge branch 'main' into fix/full-height-editable-cell-hover-target

6b9d48e

nyomanjyotisa approved these changes Jul 24, 2026

View reviewed changes

melvin-bot Bot requested a review from MonilBhavsar July 24, 2026 04:10

MonilBhavsar reviewed Jul 24, 2026

View reviewed changes

fix: add table row height style to transaction item row for improved …

42c18ef

…layout

nyomanjyotisa suggested changes Jul 25, 2026

View reviewed changes

MonilBhavsar reviewed Jul 27, 2026

View reviewed changes

x-dev90 added 5 commits July 27, 2026 17:46

fix: preserve row height for full-height editable cell hover

121be5f

fix: update editable cell style to ensure consistent rendering

85990b9

Merge branch 'main' into fix/full-height-editable-cell-hover-target

1a7b722

fix: refactor transaction row styles for improved layout handling

8ae0bc0

fix: add type annotation for transactionRowStyle in MoneyRequestRepor…

e25fa11

…tTransactionItemBody

MonilBhavsar requested a review from nyomanjyotisa July 27, 2026 16:32

Uh oh!

Conversation

x-dev90 commented Jul 16, 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!

codecov Bot commented Jul 17, 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!

melvin-bot Bot commented Jul 17, 2026

Uh oh!

x-dev90 commented Jul 17, 2026

Uh oh!

x-dev90 commented Jul 18, 2026

Uh oh!

x-dev90 commented Jul 18, 2026

Uh oh!

github-actions Bot commented Jul 20, 2026

Uh oh!

github-actions Bot commented Jul 20, 2026

Uh oh!

dubielzyk-expensify commented Jul 20, 2026

Uh oh!

shawnborton commented Jul 20, 2026

Uh oh!

x-dev90 commented Jul 21, 2026

Uh oh!

mallenexpensify commented Jul 22, 2026

Uh oh!

nyomanjyotisa left a comment

Choose a reason for hiding this comment

Uh oh!

nyomanjyotisa Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

x-dev90 Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nyomanjyotisa Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

nyomanjyotisa commented Jul 24, 2026

Reviewer Checklist

Screenshots/Videos

Uh oh!

nyomanjyotisa left a comment

Choose a reason for hiding this comment

Uh oh!

x-dev90 commented Jul 24, 2026

Uh oh!

MonilBhavsar left a comment

Choose a reason for hiding this comment

Uh oh!

x-dev90 commented Jul 24, 2026

Uh oh!

x-dev90 commented Jul 25, 2026

Uh oh!

nyomanjyotisa left a comment

Choose a reason for hiding this comment

Uh oh!

nyomanjyotisa Jul 25, 2026

Choose a reason for hiding this comment

Uh oh!

nyomanjyotisa Jul 25, 2026

Choose a reason for hiding this comment

Uh oh!

MonilBhavsar left a comment

Choose a reason for hiding this comment

Uh oh!

x-dev90 commented Jul 27, 2026

Uh oh!

Reviewers

x-dev90 commented Jul 16, 2026 •

edited

Loading

codecov Bot commented Jul 17, 2026 •

edited by github-actions Bot

Loading

x-dev90 Jul 23, 2026 •

edited

Loading