Per diem, Taxes, Distance Rates - Missing Display button on narrow screen

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.46-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: #94678
Email or phone of affected tester (no customers): applausetester+khcategory19@applause.expensifail.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:

Precondition:

• Workspace has per diem rates.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Categories.
3. Resize the screen to small.
   → Display button is shown next to search field.
4. Resize the screen to wide.
5. Go to workspace settings > Per diem.
6. Resize the screen to small.
   → Display button is not shown next to search field.

Expected Result:

Display button will be shown next to search field on Per diem page on narrow screen.

Actual Result:

Display button is not shown next to search field on Per diem page on narrow screen.

This issue is also reproducible on Taxes and Distance Rates on narrow screen.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

To be added by Applause Leads

View all open jobs on GitHub

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

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

[melvin-bot]

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

[melvin-bot]

@JS00001 @ChavdaSachin you have been assigned to this deploy blocker because you reviewed the offending PR: #94678

[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]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #94678 - "Add bulk actions for company cards" by @KJ21-ENG (High confidence)
Related Issues: #96047 (the tracking issue for the shared Display > Sort by control)

Recommendation: DEMOTE

The differing behavior is intentional by design in the causing PR: the Display (Sort by) control is deliberately hidden on narrow layouts for tables that lock their sort order via narrowLayoutSortColumn, because user sorting is a no-op there. This is a brand-new feature that does not exist in production, the difference is cosmetic, and it does not affect core functionality — so it should not block the deploy. If product decides the button should appear on these pages, that is a targeted follow-up, not a revert.

Assigned: @KJ21-ENG (PR author), @ChavdaSachin and @JS00001 (approving reviewers) from the causing PR
Labels: No change. DeployBlockerCash kept (this is an App/frontend issue); no DeployBlocker present. Final demotion decision left to BugZero.

📋 Detailed Analysis

Evidence

• PR [Payment due @ChavdaSachin] Add bulk actions for company cards #94678 (merged 2026-07-29, in the v9.4.46 staging deploy) introduced a shared Display (Sort by) control that Table.FilterBar now renders automatically for every table with a sortable column (tracked under Add support for a 'sort by' popover for all tables #96047). The whole Display button is new — it does not exist in production, which matches "Reproducible in production?: N/A - new feature."
• The same PR added the gating logic that hides that control on narrow layouts when a table locks its sort order. The PR did not modify the Per Diem / Taxes / Distance Rates table files — those tables already carried narrowLayoutSortColumn, so the new gating logic is what changed their observable behavior.
• Reproduces on staging only (new feature), consistent with the report.

Verification

The visibility is controlled by shouldShowTableDisplaySettingsTrigger, added in PR #94678:

src/components/Table/TableFilterBar/TableDisplaySettingsTrigger.tsx#L27-L32

App/src/components/Table/TableFilterBar/TableDisplaySettingsTrigger.tsx

Lines 27 to 32 in f704af6

	// On narrow layouts, tables with a narrowLayoutSortColumn ignore user sorting entirely, so a sort control would be a no-op.
	function shouldShowTableDisplaySettingsTrigger({columns, shouldUseNarrowTableLayout, narrowLayoutSortColumn}: ShouldShowTableDisplaySettingsTriggerParams): boolean {
	const hasSortableColumns = columns.some((column) => column.sortable);
	const isSortingLockedByLayout = shouldUseNarrowTableLayout && !!narrowLayoutSortColumn;
	return hasSortableColumns && !isSortingLockedByLayout;
	}

// On narrow layouts, tables with a narrowLayoutSortColumn ignore user sorting entirely, so a sort control would be a no-op.
function shouldShowTableDisplaySettingsTrigger({columns, shouldUseNarrowTableLayout, narrowLayoutSortColumn}): boolean {
    const hasSortableColumns = columns.some((column) => column.sortable);
    const isSortingLockedByLayout = shouldUseNarrowTableLayout && !!narrowLayoutSortColumn;
    return hasSortableColumns && !isSortingLockedByLayout;
}

This is consumed by the FilterBar action column:
src/components/Table/TableFilterBar/index.tsx#L26

App/src/components/Table/TableFilterBar/index.tsx

Line 26 in f704af6

const showsDisplaySettingsTrigger = shouldShowTableDisplaySettingsTrigger({columns, shouldUseNarrowTableLayout, narrowLayoutSortColumn});

The three affected tables all set narrowLayoutSortColumn, so isSortingLockedByLayout is true on narrow layouts and the Display button is hidden:

• Per Diem — narrowLayoutSortColumn="destination":

  App/src/components/Tables/WorkspacePerDiemTable/index.tsx

  Line 127 in f704af6

  narrowLayoutSortColumn="destination"

• Taxes — narrowLayoutSortColumn="name":

  App/src/components/Tables/WorkspaceTaxesTable/index.tsx

  Line 87 in f704af6

  narrowLayoutSortColumn="name"

• Distance Rates — narrowLayoutSortColumn="name":

  App/src/components/Tables/WorkspaceDistanceRatesTable/index.tsx

  Line 161 in f704af6

  narrowLayoutSortColumn="name"

The Categories table does not set narrowLayoutSortColumn, so isSortingLockedByLayout is false and the button is shown on narrow layouts:

App/src/components/Tables/WorkspaceCategoriesTable/index.tsx

Lines 148 to 163 in f704af6

	return (
	<Table
	ref={ref}
	data={categories}
	initialSortColumn="name"
	selectionEnabled={selectionEnabled}
	title={translate('workspace.common.categories')}
	columns={categoryTableColumns}
	compareItems={compareItems}
	isItemInSearch={isItemInSearch}
	renderItem={renderCategoryItem}
	selectedKeys={selectedKeys}
	keyExtractor={(category) => category.keyForList}
	onRowSelectionChange={onRowSelectionChange}
	>
	<Table.FilterBar label={translate('workspace.categories.findCategory')} />

Root Cause

The Display > Sort by button's narrow-layout visibility is tied to narrowLayoutSortColumn. Categories does not lock its sort column, so it keeps the button on narrow screens; Per Diem, Taxes, and Distance Rates lock their sort column (sorting is fixed and user sorting is ignored on narrow layouts), so the shared logic intentionally hides the button — a sort-only Display popover there would do nothing. The result is a UX inconsistency between pages, but each page's behavior is exactly what the shared logic prescribes.

Why not REVERT / ROLL FORWARD

• REVERT would remove the entire company-cards bulk-actions feature plus the global Display control for a cosmetic difference on three pages — disproportionate.
• ROLL FORWARD (making the button appear on the locked tables) would surface a sort control that is a no-op on narrow layouts, contradicting the deliberate design; it needs product/design input first, so it is a follow-up rather than a blocker fix.

[KJ21-ENG]

After looking into this, my take is that this is intentional rather than a regression from #94678. Per Diem, Taxes, and Distance Rates already set narrowLayoutSortColumn, so user sorting is locked on narrow layouts. The PR hides Display there because changing the setting would be a no-op. This was also documented and called out during review: #94678 (comment)

I think this should be demoted.

[JS00001]

Yeah I think this is expected as well