[Due for payment 2026-08-07] iOS - Spend - Filter name is cut off in landscape mode

@bernhardoj

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: #93909
Email or phone of affected tester (no customers): sdsjodijnsdojsosjio@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 15 Pro Max / iOS 26.5.2
App Component: Money Requests

Action Performed:

Launch Expensify app.
Go to Spend > Expenses.
Open Filters.
Tap Status.
Select any status > Confirm > Apply filters.
Rotate device to landscape mode.
Open Status quick filter.

Expected Result:

"Status" filter name will not be cut off in landscape mode.

Actual Result:

"Status" filter name is cut off in landscape mode.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug7221309_1785361368979.ScreenRecording_07-30-2026_05-40-41_1.mp4

View all open jobs on GitHub

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

Issue Owner

Current Issue Owner: @bernhardoj

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

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

@JS00001

@JS00001 @aimane-chnaif you have been assigned to this deploy blocker because you reviewed the offending PR: #93909

@bernhardoj

@bernhardoj you have been assigned to this deploy blocker because you authored the offending PR: #93909

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

👋 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:

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

@bernhardoj

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #93909 - "Add filter negation feature" by @bernhardoj (Medium-High confidence)
Related Issues: #93208 (feature request implemented by the PR)

Recommendation: ROLL FORWARD (targeted fix)

The negation feature adds a new "Filter type" toggle row at the top of every negatable filter popup (including Status). In landscape the bottom-docked popup does not scroll, so the extra row pushes the "Status" label until it is clipped. A targeted layout fix is far safer than reverting the entire feature PR; this is a cosmetic, landscape-only issue that BugZero may also choose to DEMOTE.

Assigned: @bernhardoj (PR author), @JS00001 and @aimane-chnaif (approving reviewers) — already assigned by melvin-bot, confirmed correct.
Labels: No change. Kept DeployBlockerCash (frontend bug, App deploy blocked). DeployBlocker was not present. Not reproducible in production, so the App blocker label stays.

📋 Detailed Analysis

Evidence

The reported control is the Status quick filter, which renders through ListPopup → BasePopup, with the <ListFilterContent> body wrapped in the new NegatableFilter component.
STATUS is a negatable filter key (src/types/form/SearchAdvancedFiltersForm.ts line 55), so opening the Status quick filter now renders the negation toggle row.

PR Add filter negation feature #93909 (merged 2026-07-28, present in the current StagingDeployCash Deploy Checklist: New Expensify 2026-07-29 #97375) introduced NegatableFilter.tsx as a brand-new file. It renders an extra header row ("Filter type" label + is/is-not toggle) above the existing popup content:

App/src/components/Search/FilterComponents/NegatableFilter.tsx

Lines 39 to 60 in ad07aea

    
           <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.ph5, styles.gap2]}> 
        
               <Text style={[styles.textLabelSupporting]}>{translate('search.filters.filterType.label')}</Text> 
        
               <View style={[styles.border, styles.negatableFilterButtons]}> 
        
                   <Button 
        
                       style={[styles.flex1]} 
        
                       innerStyles={[isNegated ? styles.bgTransparent : undefined]} 
        
                       size={CONST.BUTTON_SIZE.SMALL} 
        
                       onPress={() => onNegationChange(false)} 
        
                   > 
        
                       <Button.Text style={[isNegated ? styles.textMicroBoldSupporting : undefined]}>{positive}</Button.Text> 
        
                   </Button> 
        
                   <Button 
        
                       style={[styles.flex1]} 
        
                       innerStyles={[isNegated ? undefined : styles.bgTransparent]} 
        
                       size={CONST.BUTTON_SIZE.SMALL} 
        
                       onPress={() => onNegationChange(true)} 
        
                   > 
        
                       <Button.Text style={[isNegated ? undefined : styles.textMicroBoldSupporting]}>{negative}</Button.Text> 
        
                   </Button> 
        
               </View> 
        
           </View> 
        
           {children}

The bug is staging-only / N/A in production, which matches: this negation UI is new in this release and does not exist in prod.

Verification

Affected feature files (Search quick filter popups): src/components/Search/FilterDropdowns/ListPopup.tsx, BasePopup.tsx, FilterPopupButton.tsx, and src/components/Search/FilterComponents/NegatableFilter.tsx.
PR Add filter negation feature #93909 file list confirms it creates NegatableFilter.tsx, ListPopup.tsx (replacing the deleted CommonPopup.tsx), and adds the search.filters.filterType.* strings across all src/languages/* — i.e. it is exactly the code that populates the top of the Status popup.

The popup label itself is rendered in BasePopup:

App/src/components/Search/FilterDropdowns/BasePopup.tsx

Lines 30 to 42 in ad07aea

    
           const shouldDisplayLabel = (showLabel ?? isSmallScreenWidth) && !!label; 
        
           return ( 
        
               <View style={[styles.pv4, style]}> 
        
                   {onBackButtonPress ? ( 
        
                       <HeaderWithBackButton 
        
                           shouldDisplayHelpButton={false} 
        
                           style={[styles.h10, styles.pv1, styles.mb2]} 
        
                           subtitle={label} 
        
                           onBackButtonPress={onBackButtonPress} 
        
                       /> 
        
                   ) : ( 
        
                       shouldDisplayLabel && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1, styles.mb2]}>{label}</Text>

Root Cause

The popover is bottom-docked in landscape and is explicitly configured NOT to wrap its children in a scroll view in that mode:

App/src/components/Search/FilterDropdowns/FilterPopupButton.tsx

Line 150 in ad07aea

shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode={false}

With no scroll container and limited vertical space in landscape, the content that exceeds the available height gets clipped at the top. PR #93909 added the extra NegatableFilter toggle row above the list, increasing the popup's content height by one row and pushing the "Status" title into the clipped region — so the title now appears cut off in landscape.

Note that FilterPopupButton.tsx (which sets the no-scroll-in-landscape behavior) was NOT modified by #93909; that behavior pre-existed. #93909 is the trigger because it added the extra height. Hence a targeted fix (allow the popup content to scroll when bottom-docked in landscape, or reduce/relayout the negation row height) is preferable to reverting the whole feature. If a quick fix is not feasible before deploy, DEMOTE is reasonable since the filter remains fully functional and only the title label is visually clipped in landscape.

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

Requested retest, we CPd a fix

@bernhardoj

@bernhardoj / @aimane-chnaif

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.4.46-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

[CP Staging] Fix filter name cut off on landscape #97432

If no regressions arise, payment will be issued on 2026-08-07. 🎊

The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]. If no checklist is needed for this issue, you can click: [no checklist button]

Navigation Menu

Repository navigation

[Due for payment 2026-08-07] iOS - Spend - Filter name is cut off in landscape mode #97414

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

🔍 Investigation Summary

Recommendation: ROLL FORWARD (targeted fix)

Evidence

Verification

Root Cause

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.ph5, styles.gap2]}>
	<Text style={[styles.textLabelSupporting]}>{translate('search.filters.filterType.label')}</Text>
	<View style={[styles.border, styles.negatableFilterButtons]}>
	<Button
	style={[styles.flex1]}
	innerStyles={[isNegated ? styles.bgTransparent : undefined]}
	size={CONST.BUTTON_SIZE.SMALL}
	onPress={() => onNegationChange(false)}
	>
	<Button.Text style={[isNegated ? styles.textMicroBoldSupporting : undefined]}>{positive}</Button.Text>
	</Button>
	<Button
	style={[styles.flex1]}
	innerStyles={[isNegated ? undefined : styles.bgTransparent]}
	size={CONST.BUTTON_SIZE.SMALL}
	onPress={() => onNegationChange(true)}
	>
	<Button.Text style={[isNegated ? undefined : styles.textMicroBoldSupporting]}>{negative}</Button.Text>
	</Button>
	</View>
	</View>
	{children}

	const shouldDisplayLabel = (showLabel ?? isSmallScreenWidth) && !!label;

	return (
	<View style={[styles.pv4, style]}>
	{onBackButtonPress ? (
	<HeaderWithBackButton
	shouldDisplayHelpButton={false}
	style={[styles.h10, styles.pv1, styles.mb2]}
	subtitle={label}
	onBackButtonPress={onBackButtonPress}
	/>
	) : (
	shouldDisplayLabel && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1, styles.mb2]}>{label}</Text>

[Due for payment 2026-08-07] iOS - Spend - Filter name is cut off in landscape mode #97414

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

applause-bot commented on Jul 30, 2026

melvin-bot commented on Jul 30, 2026

melvin-bot commented on Jul 30, 2026

melvin-bot commented on Jul 30, 2026

melvin-bot commented on Jul 30, 2026

github-actions commented on Jul 30, 2026

MelvinBot commented on Jul 30, 2026

🔍 Investigation Summary

Recommendation: ROLL FORWARD (targeted fix)

Evidence

Verification

Root Cause

melvin-bot commented on Jul 30, 2026

JS00001 commented on Jul 30, 2026

melvin-bot commented on Jul 31, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions