Restore inline editing of the Expensify Card name by ahmedGaber93 · Pull Request #103894 · Expensify/App

ahmedGaber93 · 2026-10-13T13:43:35Z

The card name is a subtitle inside the cardholder cell, so EditableCell's padded box grew that line from 16px to 32px and opened a gap above the freeze message, which is why inline editing was removed from it as a temporary fix.

EditableCell now takes shouldRenderDisplayChrome so a composite cell can keep its own line heights at rest, and InlineTextEditCell accepts that display block as children. The cardholder cell gets one pencil, and editing swaps the whole cell for the card name input, per the design agreed on the issue.

Explanation of Change

Fixed Issues

$ #103150
PROPOSAL:

Tests

Precondition:

You have admin role on a workspace with Expensify Card enabled, and a card issued to yourself
Large screen only

Open the App
Go to Workspace settings > Expensify Card
Freeze the card
Verify the gap between the card name and the freeze message is the same as production
Hover the cardholder cell
Verify one pencil shows on the cell
Click the pencil
Verify the cardholder name and card name are replaced by a card name input, and the avatar stays
Enter a new card name
Press Enter
Verify the new card name shows under the cardholder name, with the freeze message still close under it

Verify that no errors appear in the JS console

Offline tests

Same as Tests step

QA Steps

Same as Tests step

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

Screen.Recording.2026-10-21.at.12.26.45.PM.mov

Screen.Recording.2026-10-21.at.12.28.30.PM.mov

…pencil The card name is a subtitle inside the cardholder cell, so EditableCell's padded box grew that line from 16px to 32px and opened a gap above the freeze message, which is why inline editing was removed from it as a temporary fix. EditableCell now takes shouldRenderDisplayChrome so a composite cell can keep its own line heights at rest, and InlineTextEditCell accepts that display block as children. The cardholder cell gets one pencil, and editing swaps the whole cell for the card name input, per the design agreed on the issue. Co-Authored-By: Claude Opus 5 <[email protected]>

The edit cell replaces its contents with the name input, so the avatar sits outside that cell.

ahmedGaber93 · 2026-10-13T13:47:20Z

Hold on #103678

ahmedGaber93 · 2026-10-13T13:47:35Z

CC @shawnborton

Screen.Recording.2026-10-13.at.4.46.06.PM.mov

codecov · 2026-10-13T13:51:53Z

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 Δ
src/components/EditableCell/EditableCell.tsx	`91.11% <100.00%> (+0.63%)`	⬆️
src/components/EditableCell/InlineTextEditCell.tsx	`100.00% <100.00%> (ø)`
...ents/Tables/WorkspaceExpensifyCardsTable/index.tsx	`76.74% <ø> (ø)`
src/libs/actions/Policy/InlineEdit.ts	`52.29% <100.00%> (+12.68%)`	⬆️
...e/expensifyCard/WorkspaceExpensifyCardListPage.tsx	`63.05% <0.00%> (-0.41%)`	⬇️
...sifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx	`0.00% <0.00%> (ø)`
... and 530 files with indirect coverage changes

shawnborton · 2026-10-13T14:15:30Z

Nice, that feels good to me!

ahmedGaber93 · 2026-10-21T09:30:21Z

@MelvinBot Please update

Tests

Precondition:

You have admin role on a workspace with Expensify Card enabled, and a card issued to yourself
Large screen only

Open the App
Go to Workspace settings > Expensify Card
Freeze the card
Verify the gap between the card name and the freeze message is the same as production
Hover the cardholder cell
Verify one pencil shows on the cell
Click the pencil
Verify the cardholder name and card name are replaced by a card name input, and the avatar stays
Enter a new card name
Press Enter
Verify the new card name shows under the cardholder name, with the freeze message still close under it

Offline tests

Same as Tests step

QA Steps

Same as Tests step

PR Author Checklist

Mark all author checklist checked

MelvinBot · 2026-10-21T09:34:09Z

I updated the PR description:

Tests: added your precondition and steps 1–11.
Offline tests and QA Steps: set to "Same as Tests step". I also removed the QA TODO line.
PR Author Checklist: checked every item.

I kept the "Verify that no errors appear in the JS console" checkbox under Tests and QA Steps.

view run

ahmedGaber93 · 2026-10-21T09:36:56Z

@MelvinBot Mark this PR ready for review

Update: Sorry! I missed that I am the author of the PR.

melvin-bot · 2026-10-21T09:37:37Z

@Krishna2323 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-21T09:37:46Z

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-21T09:56:25.629047Z	`2d2b34e`	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.

MelvinBot · 2026-10-21T09:38:42Z

This PR is already marked ready for review. It is open and not a draft, so I made no change.

view run

ahmedGaber93 · 2026-10-21T09:40:02Z

Sorry, Melvin! I missed that I’m the author of this PR.

github-actions · 2026-10-21T09:43:59Z

+
+    /**
+     * Display content replacing the default single-line text, for a cell that shows more than the
+     * value being edited — such as a cardholder block whose subtitle is the card name. The box that


❌ CONSISTENCY-15 (docs)

This newly added JSDoc comment for the children prop uses an em dash in its own sentence (value being edited — such as a cardholder block...). Comments should read as plain sentences without em dashes.

Rewrite the sentence without the em dash, for example:

/** * Display content replacing the default single-line text, for a cell that shows more than the * value being edited, such as a cardholder block whose subtitle is the card name. The box that * normally wraps display content is dropped so that layout keeps its own line heights. Editing * still swaps the whole cell for the input. */ children?: ReactNode;

Reviewed at: 2d2b34e | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.

github-actions · 2026-10-21T09:44:01Z

+     * Whether display mode wraps children in the padded, bordered `editableCell` box.
+     * A composite cell whose display content is taller than one line owns its own layout,
+     * and the box would add height to it. Edit mode still draws the box around its input.
+     */


❌ CLEAN-REACT-PATTERNS-1 (docs)

The new shouldRenderDisplayChrome boolean prop is a configuration flag that toggles a layout strategy inside EditableCell (whether to wrap children in the padded, bordered editableCell box). It drives ternary branching at two render sites (shouldRenderDisplayChrome ? <View style={styles.editableCell}>{children}</View> : children), so the component has to grow a new flag and new internal branches to support a composite cell that owns its own layout. This is configuration-over-composition: a prop that selects a rendering strategy is a behavioral flag, not a presentational one.

Prefer composition: let the consumer decide whether the box is drawn rather than threading a flag through EditableCell. For example, expose the display chrome as a composable wrapper (e.g. a <EditableCell.DisplayBox> sub-component the caller includes or omits) so a composite cell can pass its own content without the box, and EditableCell stays stable instead of branching on shouldRenderDisplayChrome.

Reviewed at: 2d2b34e | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.

Turning that flag into a DisplayBox child changes the layout of the other editable cells. so it will require many changes on all onther cells, so I left shouldRenderDisplayChrome in place.

The flag only applies while the cell is showing its display content. Edit mode and popover mode always draw the editableCell box themselves:

App/src/components/EditableCell/EditableCell.tsx

Lines 128 to 146 in ae7210c

// Inline edit mode: replace display content with the edit input

if (isEditing && editContent) {

return <View style={[styles.editableCell, styles.editableCellFocus]}>{editContent}</View>;

}

// Popover edit mode: keep showing display content with active border

if (isEditing && popoverContent) {

return (

<>

<View

ref={anchorRef}

style={[styles.editableCell, styles.editableCellFocus]}

>

{children}

</View>

{popoverContent}

</>

);

}

That box is padding, a transparent border, and a minimum height. Date, category, tag, and the other popover cells rely on EditableCell to add it. If the caller also wrapped the display content in DisplayBox, opening the picker would nest a second box: extra padding and a taller cell. If EditableCell stopped drawing the box and every caller added DisplayBox, any missed caller would lose that padding, and the popover focus border would still have to be applied from inside EditableCell.

The card-name cell is the one caller that opts out, because its display content is the cardholder block and the box would add height. Editing that cell still needs the box around the input. A child the caller includes or omits cannot describe both of those states.

ahmedGaber93 · 2026-10-21T10:33:38Z

@MelvinBot please update those comments #103894 (comment) #103894 (comment)

MelvinBot · 2026-10-21T10:36:27Z

I can't push these changes because I'm not the author or an assignee on this PR. Here is what I would change for each comment.

1. Em dash in the children JSDoc in src/components/EditableCell/InlineTextEditCell.tsx. Replace the em dash with a comma:

    /**
     * Display content replacing the default single-line text, for a cell that shows more than the
     * value being edited, such as a cardholder block whose subtitle is the card name. The box that
     * normally wraps display content is dropped so that layout keeps its own line heights. Editing
     * still swaps the whole cell for the input.
     */
    children?: ReactNode;

2. shouldRenderDisplayChrome flag in src/components/EditableCell/EditableCell.tsx. To use composition instead of a flag:

Remove shouldRenderDisplayChrome from EditableCell, and render children directly at both display sites.
Export a small EditableCellDisplayBox component that renders <View style={styles.editableCell}>{children}</View>.
In InlineTextEditCell, wrap the default TextWithTooltip in EditableCellDisplayBox. Pass custom children through unwrapped.
Wrap the display content in EditableCellDisplayBox at every other EditableCell call site, so their layout stays the same.

Step 4 changes every existing EditableCell caller. If you'd rather keep this PR small, you could reply on the thread that the flag only controls presentation and is scoped to this cell.

⚠️ To have me make these changes, add me to the PR assignees and then retry your request.

view run

trjExpensify

Nice to have it back! 👍

Krishna2323 · 2026-10-22T22:05:26Z

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 any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- 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 and each prop has a /** comment above it */
- The file is named correctly
- 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
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- 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 any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
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: mWeb Chrome

iOS: HybridApp

iOS: mWeb Safari

MacOS: Chrome / Safari

Monosnap.screencast.2026-10-23.03-31-57.mp4

Krishna2323

LGTM!

github-actions · 2026-10-23T10:58:28Z

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

OSBotify · 2026-10-23T11:02:00Z

✋ 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-23T11:04:02Z

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-e680db7d-bf46249-767677e796c342884f46ba8644e1a797cdb9d8e6/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-e680db7d-bf46249-e7bef24c3f461d43c438dd9313c8a81265f58c54/index.html

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

👀 View the workflow run that generated this build 👀

OSBotify · 2026-10-23T17:14:14Z

🚀 Deployed to staging by https://github.com/JS00001 in version: 9.5.20-0 🚀

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

MelvinBot · 2026-10-23T17:17:01Z

No help site update is needed. This PR restores inline editing of the card name, and Set-Up-and-Manage-the-Expensify-Card-US.md already says: "On the web, you can also hover over a card's Name, Limit type, or Limit in the list and click the pencil icon that appears to edit it inline." That sentence is still accurate.

view run

OSBotify · 2026-10-26T20:41:47Z

🚀 Deployed to production by https://github.com/jasperhuangg in version: 9.5.20-5 🚀

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

Bundle Size Analysis (Sentry):

Android
iOS

ahmedGaber93 and others added 2 commits October 13, 2026 16:16

Keep the cardholder avatar visible while editing the Expensify Card name

35fe263

The edit cell replaces its contents with the name input, so the avatar sits outside that cell.

melvin-bot Bot assigned ahmedGaber93 Oct 13, 2026

ahmedGaber93 changed the title ~~Restore inline editing of the Expensify Card name~~ [Hold on #103678] Restore inline editing of the Expensify Card name Oct 13, 2026

ahmedGaber93 added 2 commits October 21, 2026 09:33

Merge main into claude-inlineEditExpensifyCardName

9cf53e4

Show validation errors when an inline Expensify Card rename is rejected

2d2b34e

ahmedGaber93 changed the title ~~[Hold on #103678] Restore inline editing of the Expensify Card name~~ Restore inline editing of the Expensify Card name Oct 21, 2026

ahmedGaber93 marked this pull request as ready for review October 21, 2026 09:37

ahmedGaber93 requested review from a team as code owners October 21, 2026 09:37

melvin-bot Bot requested review from Krishna2323 and removed request for a team October 21, 2026 09:37

melvin-bot Bot requested review from trjExpensify and removed request for a team October 21, 2026 09:37

github-actions Bot reviewed Oct 21, 2026

View reviewed changes

Write the InlineTextEditCell children comment as a plain sentence.

ae7210c

Krishna2323 reviewed Oct 21, 2026

View reviewed changes

Comment thread tests/unit/inlineEditing/PolicyInlineEdit.test.ts Resolved

Comment thread src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx Resolved

Comment thread src/components/EditableCell/InlineTextEditCell.tsx Resolved

trjExpensify previously approved these changes Oct 21, 2026

View reviewed changes

Pin cardID in the Expensify Card rename write assertion.

eb78e0b

ahmedGaber93 dismissed trjExpensify’s stale review via eb78e0b October 22, 2026 08:40

ahmedGaber93 added 2 commits October 22, 2026 11:46

Remove the unused flex grow from the cardholder name block.

c7f3a71

Clarify displayTextStyle docs when InlineTextEditCell has children.

1830b94

ahmedGaber93 requested a review from Krishna2323 October 22, 2026 08:58

Krishna2323 approved these changes Oct 22, 2026

View reviewed changes

melvin-bot Bot requested a review from JS00001 October 22, 2026 22:05

JS00001 approved these changes Oct 23, 2026

View reviewed changes

JS00001 merged commit e680db7 into Expensify:main Oct 23, 2026
35 of 39 checks passed

OSBotify mentioned this pull request Oct 23, 2026

Deploy Checklist: New Expensify 2026-10-23 #104870

Closed

melvin-bot Bot mentioned this pull request Oct 26, 2026

[Due for payment 2026-11-02] Expensify Card - Bigger gap between card name and freeze card message #103150

Closed

2 of 7 tasks

	// Inline edit mode: replace display content with the edit input
	if (isEditing && editContent) {
	return <View style={[styles.editableCell, styles.editableCellFocus]}>{editContent}</View>;
	}

	// Popover edit mode: keep showing display content with active border
	if (isEditing && popoverContent) {
	return (
	<>
	<View
	ref={anchorRef}
	style={[styles.editableCell, styles.editableCellFocus]}
	>
	{children}
	</View>
	{popoverContent}
	</>
	);
	}

Conversation

ahmedGaber93 commented Oct 13, 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!

ahmedGaber93 commented Oct 13, 2026

Uh oh!

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

Uh oh!

Uh oh!

codecov Bot commented Oct 13, 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!

shawnborton commented Oct 13, 2026

Uh oh!

ahmedGaber93 commented Oct 21, 2026

Tests

Offline tests

QA Steps

PR Author Checklist

Uh oh!

MelvinBot commented Oct 21, 2026

Uh oh!

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

Uh oh!

Uh oh!

melvin-bot Bot commented Oct 21, 2026

Uh oh!

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

Uh oh!

Codex Review Summary

Uh oh!

MelvinBot commented Oct 21, 2026

Uh oh!

ahmedGaber93 commented Oct 21, 2026

Uh oh!

github-actions Bot Oct 21, 2026

Choose a reason for hiding this comment

❌ CONSISTENCY-15 (docs)

Uh oh!

ahmedGaber93 Oct 21, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Oct 21, 2026

Choose a reason for hiding this comment

❌ CLEAN-REACT-PATTERNS-1 (docs)

Uh oh!

ahmedGaber93 Oct 21, 2026

Choose a reason for hiding this comment

Uh oh!

ahmedGaber93 commented Oct 21, 2026

Uh oh!

MelvinBot commented Oct 21, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

trjExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

Krishna2323 commented Oct 22, 2026

Reviewer Checklist

Screenshots/Videos

Uh oh!

Krishna2323 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 23, 2026

Uh oh!

OSBotify commented Oct 23, 2026

Uh oh!

github-actions Bot commented Oct 23, 2026

ahmedGaber93 commented Oct 13, 2026 •

edited

Loading

ahmedGaber93 commented Oct 13, 2026 •

edited

Loading

codecov Bot commented Oct 13, 2026 •

edited by github-actions Bot

Loading

ahmedGaber93 commented Oct 21, 2026 •

edited

Loading

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

edited

Loading