Add remaining limit column to Expensify Card table

[mountiny]

Explanation of Change

Adds a "Remaining limit" column to the Expensify Card table (next to the existing "Limit" column) so admins can see how much of each cardholder's limit is left without opening every card individually. The per-card remaining limit (availableSpend) already exists in Onyx and is returned by OpenPolicyExpensifyCardsPage — this is a frontend-only change to surface it in the table (wide layout: new column; narrow layout: shown stacked next to the limit).

Fixed Issues

$ #95036
PROPOSAL:

Tests

1. Open a workspace as an admin and enable the Expensify Card feature.
2. Issue at least two Expensify Cards to different members with different limits/spend.
3. Navigate to Workspaces > [Workspace] > Expensify Card.
4. Verify a "Remaining limit" column appears after "Limit", showing the correct remaining amount for each card.
5. Click the "Remaining limit" column header and verify sorting toggles ascending/descending/reset correctly.
6. Shrink the browser window (or use a narrow/mobile viewport) and verify the remaining limit is shown stacked next to the limit value, without truncation or overlap.
7. Open an individual card's details page and confirm the "Remaining limit" value matches the value shown in the table.

• Verify that no errors appear in the JS console

Offline tests

1. Go offline, then open the Expensify Card table for a workspace that has already loaded card data.
2. Verify the "Remaining limit" column still renders from cached Onyx data with no errors.

QA Steps

1. Open a workspace as an admin and enable the Expensify Card feature.
2. Issue at least two Expensify Cards to different members with different limits/spend.
3. Navigate to Workspaces > [Workspace] > Expensify Card.
4. Verify a "Remaining limit" column appears after "Limit", showing the correct remaining amount for each card.
5. Click the "Remaining limit" column header and verify sorting works.
6. Test on a narrow viewport (or mobile device) and verify the remaining limit is shown stacked next to the limit value.

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover 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 tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (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 followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• 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 new assets were added or existing ones were modified, I verified that:
  • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
  • The assets load correctly across all supported platforms.
• 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.
• I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user 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.

Screenshots/Videos

Android: Native

Not yet tested — needs manual QA.

Android: mWeb Chrome

Not yet tested — needs manual QA.

iOS: Native

Not yet tested — needs manual QA.

iOS: mWeb Safari

Not yet tested — needs manual QA.

MacOS: Chrome / Safari

Not yet tested — needs manual QA.

[melvin-bot]

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

[codecov]

Codecov Report

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

Files with missing lines	Coverage Δ
src/styles/variables.ts	100.00% <ø> (ø)
...e/expensifyCard/WorkspaceExpensifyCardListPage.tsx	0.00% <0.00%> (ø)
...sifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx	0.00% <0.00%> (ø)
...ents/Tables/WorkspaceExpensifyCardsTable/index.tsx	0.00% <0.00%> (ø)
... and 10 files with indirect coverage changes

[github-actions]

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

[github-actions]

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

[github-actions]

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

[mountiny]

@MelvinBot sync with main

[mountiny]

Synced with main via rebase (no conflicts). Reformatted per the new Oxfmt tooling and re-verified lint/typecheck/React Compiler compliance.

[github-actions]

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

[mountiny]

@Expensify/design @joekaufmanexpensify here it is updates with the Remaining Limit

On narrow the Remaining limit would be with the dot next to the limit

Cut we can change that as well

[mountiny]

Not looking the best on Mobile though with larger limit so I guess we can remove it from the mobile card style?

[joekaufmanexpensify]

Yeah, it looks a bit jumbled to me. I'd probably vote to remove it on mobile.

[dannymcclain]

Yeah I agree with Joe, let's remove it on mobile. Desktop is looking pretty good, but it seems like the Last 4 column is huge and the name column is too small. Is there any way we can even out those columns a bit and give more space to the name column?

---

@mountiny unrelated: The letter avatars in your screenshots look tiny - where did those come from? Just want to know if we need to do some follow up on those.

[shawnborton]

Agree with all of those comments. We should be able to just hard code a width for the last 4 column, let's just do something similar to the Type or Limit width.

[shawnborton]

@dannymcclain Georgia just submitted a fix for the tiny avatar letters and they are on staging. So a fresh pull of main should fix things.

[shawnborton]

Actually maybe this is just our eyes playing tricks on us - limit is right aligned, last four is left aligned... so there is a big gap in between even if the columns are technically the same size, hence the perceived "wide column" effect?

[mountiny]

@dannymcclain I think this PR #95639

[mountiny]

Updated per feedback: the Remaining limit is now hidden on narrow/mobile layout (same pattern as Type / Limit Type / Last 4), since it looked jumbled with larger limits there. Desktop is unchanged. Also re-synced with main again (rebase, no conflicts) and re-verified lint/typecheck/format/React Compiler compliance.

[github-actions]

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

[github-actions]

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-17d212306ab-aa76580-671fc1a80dee71e301dbf1f1b1c36f338be7ffd6/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-17d2123-aa76580-13162d9fcb35b0ead3337c4373f61c8541f819bf/index.html

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

---

👀 View the workflow run that generated this build 👀

[shawnborton]

Tests well:

But yeah, maybe we actually want a much shorter width for last 4 since it can only ever be four digits wide... not a blocking comment but something we can consider either here or as a follow up.

[dannymcclain]

Yeah, it really bothers me that the name column is so heavily truncated when there's gobs of space available.

[mountiny]

@shawnborton good call — done in 59daba0.

The Last 4 column now has a fixed 88px width on wide layouts instead of taking an equal 1fr share of the grid, so the space it was wasting goes to the flexible columns (Name, Type, Limit type, Status, Limit, Remaining limit). Narrow/mobile layouts are unaffected since they don't use the grid template.

I sized it at 88px rather than something tighter because the header still has to fit the longest translated label plus the sort caret — Polish is Ostatnie 4 and French is 4 derniers. Happy to go narrower if you'd rather the header truncate in those locales.

Also rebased on latest main, which now includes the new Status column. Re-ran oxfmt, lint-changed, typecheck-tsgo, and the React Compiler compliance check — all green.