[Due for payment 2026-07-16] Members - Role quick filter overlaps with Filters button when resized

[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.29-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #93963
Email or phone of affected tester (no customers): sidbhisdhidhisdhis@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Workspace Settings

Action Performed:

1. Go to staging.new.expensify.com
2. Create a Control workspace.
3. Go to workspace settings > Members.
4. Click Filters.
5. Select all roles and click Apply.
6. Resize the screen until Role quick filter overlaps with Filters button.

Expected Result:

Role quick filter will not overlap with Filters button when resized.

Actual Result:

Role quick filter overlaps with Filters button when resized.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7203000_1783525794553.10.mp4

View all open jobs on GitHub

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

Issue Owner

Current Issue Owner: @Krishna2323

[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/b07915773939656108a2f91e87d71c77e8a9184ef71e428932d157db36e6e395

[melvin-bot]

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

[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

Regression from #93963 ("Update filters bar for tables"), which rebuilt the table filter bar. This is the deploy blocker.

What is the root cause of that problem?

On the wide (non‑narrow) layout, the applied "Role" filter chip is rendered inline, inside the same flex1 row as the search input, while the Filters button lives in a sibling action column that does not shrink. At certain intermediate widths the chip collides with the Filters button.

Mechanism, in TableFilterBar/index.tsx:

• The left container is flex1 + flexRow + flexWrap and holds the search bar and the active‑filter chips (L67‑L69).
• The search input forces a hard minWidth: 200 (mnw200) on that left region (TableSearchBar.tsx:53), so the left region can't shrink below the search bar's width.
• The right action column (L72‑L77) has no flex/flexShrink, so in Yoga it keeps its natural Filters‑button width and never yields space.
• The inline‑vs‑below switch only happens at shouldUseNarrowLayout || isMediumScreenWidth (WorkspaceMembersTable/index.tsx:77). Just above that breakpoint the search bar (≥200px) + the inline Role chip exceed the shrunken left column, so the chip bleeds into the fixed Filters button instead of wrapping clear of it — the reported overlap.

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

Keep the applied‑filter chips from ever sharing horizontal space with the action column. Options, in TableFilterBar/index.tsx:

• Preferred: render the active‑filter chips on their own full‑width row below the search/action row for all breakpoints (i.e. drop the inline !shouldUseNarrowTableLayout && ActiveFilterChipsComponent at L69 and always render the bottom ActiveFilterChipsComponent at L80). This removes the search‑bar/chip/Filters‑button contention entirely.
• Or, if inline chips must stay on wide screens: give the chips their own flexShrink1 wrapper and guarantee a gap to the action column, and/or raise the inline→below breakpoint so chips move below before they can reach the Filters button.

Notes / confidence

• Confidence: Medium — root cause is well‑supported by the code (flex layout + mnw200 + non‑shrinking action column), but the exact pixel breakpoint and the final CSS should be confirmed visually by resizing the Members table with an applied Role filter, since this is a layout/rendering edge case.
• Quick related‑issue scan found no other open matches.

---

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