[Due for payment 2026-06-23] [$250] Review landscape layout for Add/Edit Agent and AI Rules pages (iOS/Android)

[MelvinBot]

Problem

On the Add/Edit Agent and AI Rules pages, the bottom-docked footer buttons are sticky to the bottom of the screen. In landscape orientation on iOS/Android, this sticky footer eats into the limited vertical space, making it hard to see the full view and interact with the multiline input.

This follows from discussion in #92971, where it was agreed that landscape handling for these pages should be reviewed separately.

Expected behavior (landscape only)

• The footer buttons should not be sticky to the bottom — instead they should sit inside the scrollable view, so the whole page can scroll.
• The multiline input should have a sensible minimum height.
• The entire page should be scrollable so the full view is reachable.

This change should be scoped to landscape orientation so portrait behavior is unaffected.

Pages to review

• Add Agent / Edit Agent
• Add Rule / Edit AI Rule

Platforms

• iOS (Native)
• Android (Native)

Scope

Review and fix landscape layout for the above pages. Confirm portrait remains unchanged.

Issue Owner

Current Issue Owner: @mallenexpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022066147794565189571
• Upwork Job ID: 2066147794565189571
• Last Price Increase: 2026-06-14

[mkhutornyi]

Happy to review this since I have context.
@NicolasBonet Mind assigning me here?

[godzillaxbox19982014-lgtm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Review landscape layout for Add/Edit Agent and AI Rules pages (iOS/Android)

What is the root cause of that problem?

I traced this to the path that handles iOS:

• src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/SubmitButtonShadow/types.ts:4 (types): isInLandscapeMode?: boolean;
• src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/SubmitButtonShadow/index.native.tsx:6 (SubmitButtonShadow): function SubmitButtonShadow({children, isInLandscapeMode = false}: SubmitButtonShadowProps) {
• src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/SubmitButtonShadow/index.native.tsx:9 (index.native): return <View style={[isInLandscapeMode ? styles.receiptsSubmitButtonLandscape : styles.receiptsSubmitButton, styles.buttonShadowContainer, styles.buttonShadow]}>{children}</View>;
• The local evidence matches this recurring failure shape: component state is keyed to every load instead of initial load. Here, src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/SubmitButtonShadow/types.ts:4 and src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/SubmitButtonShadow/index.native.tsx:6 do not agree on the same iOS value, so the user-visible path can show a missing or stale state even though nearby data already has the needed context.

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

• Update src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/SubmitButtonShadow/types.ts:4 to derive iOS from the matched app state path that owns this flow before the value is consumed.
• Carry the same normalized value through src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/SubmitButtonShadow/index.native.tsx:6; that follows the safer family move to add a local hasEverLoaded/hasInteracted guard, so the write/optimistic/read paths agree instead of only changing the visible component.
• Keep the change inside the UI, Forms, Lists, Accessibility surface and avoid changing platform-specific variants, screen reader behaviour.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

1. Add or update a regression in tests/components/**/*.ts for the exact issue flow: Review landscape layout for Add/Edit Agent and AI Rules pages (iOS/Android).
2. Cover the counter-case near src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/SubmitButtonShadow/types.ts:4 so valid existing iOS behavior still works.
3. Manually repeat the issue steps after the patch and confirm the visible state/action is no longer stale.

What alternative solutions did you explore? (Optional)

• I would not add a broad new condition outside these referenced paths; the safer fix is to keep iOS consistent at the first read/write boundary shown above.

[x-dev90]

Proposal

What is the root cause of that problem?

The affected form pages force the non-scroll form layout even when native phones are in landscape.

AddAIRulePage hard-codes shouldUseScrollView={false} and submitFlexEnabled={false}, then renders the multiline prompt input as a flex-filled child without any landscape minimum height. In this layout, FormWrapper renders the submit button after the flex content inside the screen rather than in a scrollable content area, so the button area consumes the already-limited landscape height.

Permalinks:

• AddAIRulePage.tsx hard-coded non-scroll form
• AddAIRulePage.tsx flex-only multiline input
• EditAIRulePage.tsx hard-coded non-scroll form and footer content
• EditPromptPage.tsx hard-coded non-scroll form
• FormWrapper.tsx only puts submit actions inside scroll content when shouldUseScrollView is enabled

AddAgentPage already uses a landscape-aware scrollable layout and minimum height for its multiline instructions input, so it does not need another change for this issue.

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

Use the existing native-only useIsInLandscapeMode() hook in the remaining affected multiline form pages.

• On AddAIRulePage, EditAIRulePage, and EditPromptPage, compute isInLandscapeMode.
• Pass shouldEnableMaxHeight={isInLandscapeMode} to ScreenWrapper.
• Pass shouldUseScrollView={isInLandscapeMode} to FormProvider.
• Keep portrait unchanged by retaining submitFlexEnabled={false} outside landscape.
• In landscape, let submitFlexEnabled fall back to the scroll layout behavior so the submit/delete actions sit inside the scrollable form content.
• Add styles.minHeight42 to the multiline input container only in landscape, matching the existing Add Agent minimum-height approach.

Tests to add or update:

• Add focused component tests around the AI Rule add/edit pages and Edit Agent prompt page to assert the landscape-only props/structure when native landscape is simulated.
• Manual validation should cover iOS and Android native landscape and portrait for Add Rule, Edit AI Rule, Add Agent, and Edit Agent prompt.

The PR discussion already identified the correct product direction: in native landscape, make the footer actions non-sticky by putting them inside the scrollable view. I followed that direction at the page level instead of changing FormWrapper globally, because this issue is scoped to these specific multiline editor pages and portrait behavior must remain unchanged.

What alternative solutions did you explore? (Optional)

[wildan-m]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On the Edit Agent instructions page and the Add/Edit AI Rule pages, the footer (Save) button is docked to the bottom of the screen. In landscape orientation on iOS/Android the docked footer eats into the already-limited vertical space, the multiline input has no sensible minimum height, and the full page cannot be scrolled, so the input is hard to see and interact with. This is the follow-up agreed in #92971 to review landscape handling for these pages separately. Portrait behavior must remain unchanged.

What is the root cause of that problem?

PR #92971 introduced a landscape-aware "scrollable layout" but only applied it to the Add Agent page. There it computes a shouldUseScrollableLayout flag from the device orientation and threads it through the layout so that, in landscape, the footer joins the scroll content (the whole page scrolls) and the multiline input keeps a minimum height:

App/src/pages/settings/Agents/AddAgentPage.tsx

Lines 44 to 45 in d4fc0fa

	const {windowWidth, windowHeight} = useWindowDimensions();
	const shouldUseScrollableLayout = useIsInLandscapeMode() || (isMobile() && windowWidth > windowHeight);

App/src/pages/settings/Agents/AddAgentPage.tsx

Lines 117 to 176 in d4fc0fa

	<ScreenWrapper
	testID={AddAgentPage.displayName}
	includeSafeAreaPaddingBottom
	offlineIndicatorStyle={styles.mtAuto}
	shouldEnableMaxHeight={shouldUseScrollableLayout}
	>
	<HeaderWithBackButton
	title={translate('addAgentPage.title')}
	onBackButtonPress={() => Navigation.goBack()}
	/>
	<FormProvider
	formID={ONYXKEYS.FORMS.ADD_AGENT_FORM}
	onSubmit={handleSubmit}
	validate={validate}
	submitButtonText={translate('addAgentPage.createAgent')}
	style={[styles.flex1, styles.ph5]}
	shouldUseScrollView={shouldUseScrollableLayout}
	submitFlexEnabled={shouldUseScrollableLayout ? undefined : false}
	shouldHideFixErrorsAlert
	enabledWhenOffline
	>
	<View style={[styles.flex1, styles.flexColumn, styles.gap5]}>
	<View style={[styles.alignItemsCenter]}>
	<AvatarButtonWithIcon
	text={translate('addAgentPage.editAvatar')}
	source={avatarSource}
	onPress={handleAvatarPress}
	size={CONST.AVATAR_SIZE.X_LARGE}
	avatarStyle={avatarStyle}
	editIcon={expensifyIcons.Pencil}
	editIconStyle={styles.smallEditIconAccount}
	sentryLabel={CONST.SENTRY_LABEL.ADD_AGENT_PAGE.AVATAR}
	/>
	</View>
	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.FIRST_NAME}
	label={translate('addAgentPage.agentName')}
	accessibilityLabel={translate('addAgentPage.agentName')}
	role={CONST.ROLE.PRESENTATION}
	autoCapitalize="words"
	spellCheck={false}
	defaultValue={defaultAgentName}
	/>
	<View style={[styles.flex1, shouldUseScrollableLayout && styles.minHeight42]}>
	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('addAgentPage.instructions')}
	accessibilityLabel={translate('addAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={defaultPrompt}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>
	</View>
	</View>

The sibling pages that share the exact same "docked footer + multiline input" form pattern never received this treatment. They hardcode shouldUseScrollView={false} and submitFlexEnabled={false} on FormProvider and omit shouldEnableMaxHeight on ScreenWrapper, so the Save button is rendered outside any scroll view and the flex layout pins it to the bottom regardless of orientation, while the multiline input has no minimum height:

Edit Agent (instructions) page:

App/src/pages/settings/Agents/Fields/EditPromptPage.tsx

Lines 63 to 101 in d4fc0fa

	return (
	<ScreenWrapper
	testID={EditPromptPage.displayName}
	includeSafeAreaPaddingBottom
	offlineIndicatorStyle={styles.mtAuto}
	>
	<HeaderWithBackButton
	title={translate('editAgentPromptPage.title')}
	onBackButtonPress={() => Navigation.goBack()}
	/>
	<FormProvider
	formID={ONYXKEYS.FORMS.EDIT_AGENT_PROMPT_FORM}
	validate={validate}
	onSubmit={handleSubmit}
	submitButtonText={translate('common.save')}
	style={[styles.flex1, styles.ph5]}
	shouldUseScrollView={false}
	submitFlexEnabled={false}
	enabledWhenOffline
	shouldHideFixErrorsAlert
	shouldValidateOnChange
	shouldValidateOnBlur
	keyboardSubmitBehavior={CONST.KEYBOARD_SUBMIT_BEHAVIOR.SUBMIT_ONLY}
	>
	<View style={[styles.flex1]}>
	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('editAgentPage.instructions')}
	accessibilityLabel={translate('editAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>
	</View>

Add AI Rule page:

App/src/pages/workspace/rules/AIRules/AddAIRulePage.tsx

Lines 68 to 108 in d4fc0fa

	<ScreenWrapper
	testID="AddAIRulePage"
	offlineIndicatorStyle={styles.mtAuto}
	includeSafeAreaPaddingBottom
	>
	<HeaderWithBackButton title={translate('workspace.rules.aiRules.addRuleTitle')} />
	<FormProvider
	ref={formRef}
	formID={ONYXKEYS.FORMS.ADD_AI_RULE_FORM}
	validate={validate}
	onSubmit={saveRule}
	submitButtonText={translate('common.save')}
	style={[styles.flex1, styles.ph5]}
	shouldUseScrollView={false}
	submitFlexEnabled={false}
	enabledWhenOffline
	shouldHideFixErrorsAlert
	shouldValidateOnChange
	shouldValidateOnBlur
	keyboardSubmitBehavior={CONST.KEYBOARD_SUBMIT_BEHAVIOR.SUBMIT_ONLY}
	>
	<View style={styles.flex1}>
	<View style={[styles.gap2, styles.mv4]}>
	<Text style={[styles.textHeadlineH2]}>{translate('workspace.rules.aiRules.describeRuleTitle')}</Text>
	<Text style={[styles.textSupporting]}>{translate('workspace.rules.aiRules.describeRuleSubtitle')}</Text>
	</View>
	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('workspace.rules.aiRules.describeRuleTitle')}
	accessibilityLabel={translate('workspace.rules.aiRules.describeRuleTitle')}
	role={CONST.ROLE.PRESENTATION}
	onKeyPress={handleKeyPress}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>
	</View>
	</FormProvider>

Edit AI Rule page:

App/src/pages/workspace/rules/AIRules/EditAIRulePage.tsx

Lines 117 to 118 in d4fc0fa

	shouldUseScrollView={false}
	submitFlexEnabled={false}

In FormWrapper, when shouldUseScrollView is false the submit button is emitted inside the form element (not wrapped in a ScrollView), which is what keeps it docked:

App/src/components/Form/FormWrapper.tsx

Lines 243 to 254 in d4fc0fa

	if (!shouldUseScrollView) {
	if (shouldSubmitButtonStickToBottom) {
	return (
	<>
	{scrollViewContent()}
	{SubmitButton}
	</>
	);
	}
	return scrollViewContent();
	}

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

Apply the same landscape-aware layout that AddAgentPage already uses to the three pages that still dock the footer: EditPromptPage.tsx (Edit Agent instructions), AddAIRulePage.tsx, and EditAIRulePage.tsx.

On each page:

1. Compute the landscape flag exactly as AddAgentPage does — const shouldUseScrollableLayout = useIsInLandscapeMode() || (isMobile() && windowWidth > windowHeight); — pulling windowWidth/windowHeight from useWindowDimensions, isMobile from @libs/Browser, and useIsInLandscapeMode from the existing hook.
2. Pass shouldEnableMaxHeight={shouldUseScrollableLayout} to ScreenWrapper so the scroll view is bounded and can actually scroll in landscape.
3. On FormProvider, replace the hardcoded props with shouldUseScrollView={shouldUseScrollableLayout} and submitFlexEnabled={shouldUseScrollableLayout ? undefined : false}. In landscape this makes FormWrapper render the children plus the Save button inside the ScrollView so the footer is no longer docked and the page scrolls as a whole.
4. Give the multiline input a sensible minimum height in landscape by adding styles.minHeight42 to its wrapping View only when shouldUseScrollableLayout is true, mirroring AddAgentPage (style={[styles.flex1, shouldUseScrollableLayout && styles.minHeight42]}).

Because shouldUseScrollableLayout is false in portrait, the rendered props collapse back to the current shouldUseScrollView={false} / submitFlexEnabled={false} / no-min-height behavior, so portrait is unaffected — only landscape on iOS/Android changes, exactly as scoped.

The Edit Agent menu page (EditAgentPage.tsx) and the expense RulePageBase are already menu-list pages rendered inside a ScrollView, so they do not exhibit the docked-footer-over-multiline problem and need no change; the multiline editing for an agent happens on EditPromptPage.

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/93182-landscape-agent-airule-footer?expand=1

What alternative solutions did you explore? (Optional)

Extracting the shared form-page scaffolding (ScreenWrapper + FormProvider + landscape flag) into a single reusable wrapper component so all four pages stay in sync automatically. This is cleaner long-term but is a larger refactor that touches working portrait behavior on multiple screens, so the targeted per-page change above is lower risk for this fix.

[dilshodmackbook-sketch]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On the Add/Edit Agent and Add/Edit AI Rule pages, the submit button is docked to the bottom of the screen. In landscape on iOS/Android the docked footer plus the keyboard leaves almost no room for the multiline prompt input, and the page can't be scrolled to reach the full content.

What is the root cause of that problem?

AddAgentPage already handles landscape correctly. It derives a shouldUseScrollableLayout flag from the orientation and feeds it into ScreenWrapper (max height), FormProvider (use a ScrollView + non-flex submit so the button scrolls with the content instead of docking) and the prompt container (a minimum height so the input stays usable):

App/src/pages/settings/Agents/AddAgentPage.tsx

Line 45 in d4fc0fa

const shouldUseScrollableLayout = useIsInLandscapeMode() || (isMobile() && windowWidth > windowHeight);

App/src/pages/settings/Agents/AddAgentPage.tsx

Lines 121 to 161 in d4fc0fa

	shouldEnableMaxHeight={shouldUseScrollableLayout}
	>
	<HeaderWithBackButton
	title={translate('addAgentPage.title')}
	onBackButtonPress={() => Navigation.goBack()}
	/>
	<FormProvider
	formID={ONYXKEYS.FORMS.ADD_AGENT_FORM}
	onSubmit={handleSubmit}
	validate={validate}
	submitButtonText={translate('addAgentPage.createAgent')}
	style={[styles.flex1, styles.ph5]}
	shouldUseScrollView={shouldUseScrollableLayout}
	submitFlexEnabled={shouldUseScrollableLayout ? undefined : false}
	shouldHideFixErrorsAlert
	enabledWhenOffline
	>
	<View style={[styles.flex1, styles.flexColumn, styles.gap5]}>
	<View style={[styles.alignItemsCenter]}>
	<AvatarButtonWithIcon
	text={translate('addAgentPage.editAvatar')}
	source={avatarSource}
	onPress={handleAvatarPress}
	size={CONST.AVATAR_SIZE.X_LARGE}
	avatarStyle={avatarStyle}
	editIcon={expensifyIcons.Pencil}
	editIconStyle={styles.smallEditIconAccount}
	sentryLabel={CONST.SENTRY_LABEL.ADD_AGENT_PAGE.AVATAR}
	/>
	</View>
	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.FIRST_NAME}
	label={translate('addAgentPage.agentName')}
	accessibilityLabel={translate('addAgentPage.agentName')}
	role={CONST.ROLE.PRESENTATION}
	autoCapitalize="words"
	spellCheck={false}
	defaultValue={defaultAgentName}
	/>
	<View style={[styles.flex1, shouldUseScrollableLayout && styles.minHeight42]}>

The three sibling pages never got this treatment. They hardcode shouldUseScrollView={false} and submitFlexEnabled={false}, omit shouldEnableMaxHeight on ScreenWrapper, and give the prompt no minimum height. So in landscape the submit button stays docked and the page can't scroll:

App/src/pages/settings/Agents/Fields/EditPromptPage.tsx

Lines 79 to 80 in d4fc0fa

	shouldUseScrollView={false}
	submitFlexEnabled={false}

App/src/pages/workspace/rules/AIRules/AddAIRulePage.tsx

Lines 81 to 82 in d4fc0fa

	shouldUseScrollView={false}
	submitFlexEnabled={false}

App/src/pages/workspace/rules/AIRules/EditAIRulePage.tsx

Lines 117 to 118 in d4fc0fa

	shouldUseScrollView={false}
	submitFlexEnabled={false}

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

1. In EditPromptPage, AddAIRulePage and EditAIRulePage, reuse the exact AddAgentPage pattern: compute const shouldUseScrollableLayout = useIsInLandscapeMode() || (isMobile() && windowWidth > windowHeight); (via useIsInLandscapeMode, useWindowDimensions, and isMobile from @libs/Browser).

2. Wire that flag through ScreenWrapper and FormProvider so the footer un-docks and the page becomes scrollable in landscape only:

-                shouldUseScrollView={false}
-                submitFlexEnabled={false}
+                shouldUseScrollView={shouldUseScrollableLayout}
+                submitFlexEnabled={shouldUseScrollableLayout ? undefined : false}

and add shouldEnableMaxHeight={shouldUseScrollableLayout} to each page's ScreenWrapper.

3. Give the prompt input a minimum height in landscape so it doesn't collapse, matching AddAgentPage:

-                    <View style={styles.flex1}>
+                    <View style={[styles.flex1, shouldUseScrollableLayout && styles.minHeight42]}>

Because the flag is false in portrait, every page keeps its current docked-footer behavior there — the change is scoped to landscape as required.

What alternative solutions did you explore? (Optional)

I considered following MerchantRulePageBase, which conditionally moves a standalone FormAlertWithSubmitButton inside/outside the ScrollView based on useIsInLandscapeMode(). It works, but these four pages already use FormProvider, which has built-in shouldUseScrollView/submitFlexEnabled plumbing, so reusing the existing AddAgentPage approach keeps the four pages consistent and avoids restructuring each one around a separate footer component.

[wildan-m]

Proposal updated — added compare branch with implementation.

[NicolasBonet]

@mkhutornyi let's take care of this asap please, I think we could use Melvin to fix this

[mkhutornyi]

Sure. I thought you're working on this.

@MelvinBot implement this