Android & iOS - Categories - Blank space at the bottom at the list

[applause-bot]

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.4.2-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #90537
Email or phone of affected tester (no customers): jsodinjosdjsoinjsiojs@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 15 Pro Max / IOS 26.5
App Component: Workspace Settings

Action Performed:

1. Launch Expensify app.
2. Go to workspace settings > Categories.
3. Scroll to the bottom of the list.

Expected Result:

No blank space at the bottom at the list.

Actual Result:

There is blank space at the bottom at the list.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7176407_1781053888273.ScreenRecording_06-10-2026_09-10-08_1.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7176407

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/2453773b23cbcb8e8b3cb8550fea08cc5daaef8c99e405908e70546bd31cfda8

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #90537

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Proposal

What is the root cause of that problem?

PR #90537 migrated the Categories page from SelectionListWithModal to the new composable Table component. The two lists use very different bottom padding on the FlashList content container:

• Old list (BaseSelectionList) used styles.pb3 → 12px.
• New Table.Body uses styles.pb20 on narrow layouts → 80px (pb20 = paddingBottom: 80).

So on mobile the list now renders ~68px more empty space below the last row (plus the bottom safe-area inset that is added on top). That extra padding is the "blank space at the bottom of the list."

This also explains why it only reproduces on Android/iOS App and not on wide web: the large padding is gated on shouldUseNarrowTableLayout (shouldUseNarrowTableLayout ? styles.pb20 : styles.pb4), so wide layouts use the much smaller pb4 (16px).

Evidence

TableBody.tsx:64-68:

const tableBodyContentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
    addBottomSafeAreaPadding: true,
    addOfflineIndicatorBottomSafeAreaPadding: true,
    style: shouldUseNarrowTableLayout ? styles.pb20 : styles.pb4,
});

• Bug source PR: Update the categories table to use the new styles #90537 ("Update the categories table to use the new styles").
• The pb20 line itself is pre-existing in Table.Body (not added by the PR), so any other page already using Table on mobile (rooms, company cards, workspace list, domains — all touched by this same PR) likely shows the same blank space and should be checked too.

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

Reduce the narrow-layout bottom padding in TableBody.tsx from styles.pb20 to a small value that matches the previous behavior (e.g. styles.pb3, or styles.pb4 to match the wide layout). The useBottomSafeSafeAreaPaddingStyle hook already adds the device's bottom safe-area inset, so an extra 80px is not needed to clear the screen edge.

Because Table.Body is shared, please verify the change against the other tables migrated in the same PR (Rooms, Company Cards, Workspace List, Domains) so none of them relied on the larger padding (e.g. to clear a bottom action bar).

What alternative solutions did you explore? (Optional)

• Override contentContainerStyle only for the Categories table via the Table.Body contentContainerStyle prop — narrower blast radius, but leaves the same blank space on every other mobile table.
• Revert Update the categories table to use the new styles #90537 to unblock the deploy if a safe targeted fix can't be landed quickly.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/93135) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.