[Due for payment 2025-08-13] [$250] Expense - Add Expense back navigation lacks top padding

[jponikarchuk]

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.1.69-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+bm721@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: mWeb, Android
App Component: Money Requests

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Create a WS
3. Go to WS chat and create an expense
4. Click on the Expense preview > More > Add Expense

Expected Result:

Add Expense back navigation should have top padding (to be consistent with other environment like Web)

Actual Result:

Add Expense back navigation doesn't have top Padding.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021935753982277693884
• Upwork Job ID: 1935753982277693884
• Last Price Increase: 2025-06-26

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @clarajones-expensify

[melvin-bot]

Triggered auto assignment to @clarajones-expensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[drminh2807]

Proposal

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

Expense - Add Expense back navigation lacks top padding

What is the root cause of that problem?

We dont add vertical padding when screen width is small

App/src/components/PopoverMenu.tsx

Lines 391 to 396 in 76728bc

	const menuContainerStyle = useMemo(() => {
	if (isSmallScreenWidth) {
	return shouldEnableMaxHeight ? {maxHeight: windowHeight - 250} : {};
	}
	return styles.createMenuContainer;
	}, [isSmallScreenWidth, shouldEnableMaxHeight, windowHeight, styles.createMenuContainer]);

App/src/styles/index.ts

Lines 1926 to 1929 in 76728bc

	createMenuContainer: {
	width: variables.sideBarWidth - 40,
	paddingVertical: variables.componentBorderRadiusLarge,
	},

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

We should add padding top incase sub menu and small screen width

    const menuContainerStyle = useMemo(() => {
        if (isSmallScreenWidth) {
            return {
                ...(shouldEnableMaxHeight ? {maxHeight: windowHeight - 250} : {}),
                ...(enteredSubMenuIndexes.length > 0 ? styles.pt4 : {}),
            };
        }
        return styles.createMenuContainer;
    }, [isSmallScreenWidth, shouldEnableMaxHeight, windowHeight, styles.createMenuContainer, styles.pt4, enteredSubMenuIndexes.length]);

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

N/A

What alternative solutions did you explore? (Optional)

N/A

[daledah]

Proposal

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

Add Expense back navigation doesn't have top Padding.

What is the root cause of that problem?

in PopoverMenu, back button doesn't have margin top:

App/src/components/PopoverMenu.tsx

Line 264 in de3f8af

const renderBackButtonItem = () => {

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

We can add wrapperStyles={styles.mt4} to back button

App/src/components/PopoverMenu.tsx

Line 270 in de3f8af

<MenuItem

Some suggested improvements:

• Update this to styles.pv2 to make back button have the same height as other menu items

App/src/components/PopoverMenu.tsx

Line 274 in de3f8af

style={hasBackButtonText ? styles.pv0 : undefined}

• There's a padding between back button and menu items:

We can consider removing this padding, OR separate back button and menu items with some texts, like "Options"

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

None, UI Bug

What alternative solutions did you explore? (Optional)

N/A

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[dmkt9]

Proposal

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

Add Expense back navigation doesn't have top Padding.

What is the root cause of that problem?

• On large screens, the PopoverMenu’s padding comes from here.
  

  App/src/components/PopoverMenu.tsx

  Lines 391 to 396 in e0250b5

  	const menuContainerStyle = useMemo(() => {
  	if (isSmallScreenWidth) {
  	return shouldEnableMaxHeight ? {maxHeight: windowHeight - 250} : {};
  	}
  	return styles.createMenuContainer;
  	}, [isSmallScreenWidth, shouldEnableMaxHeight, windowHeight, styles.createMenuContainer]);

• On small screens, padding is applied via the scrollContainerStyle prop on the ScrollView. Since renderBackButtonItem() lives outside that ScrollView, the back button ends up flush against the edge with no padding:
  

  App/src/components/PopoverMenu.tsx

  Lines 433 to 434 in e0250b5

  	{enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
  	{renderWithConditionalWrapper(shouldUseScrollView, scrollContainerStyle, renderedMenuItems)}

Mobile:

Desktop:

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

1. Wrap the BackButton and the ScrollView in a new <View> wrapper.

2. Use StyleSheet.flatten to pull out only the vertical padding (paddingTop, paddingBottom, paddingVertical) for the <View> wrapper, and pass the remaining style props through to the ScrollView:

const {paddingTop, paddingBottom, paddingVertical, ...restScrollContainerStyle} = StyleSheet.flatten(scrollContainerStyle);

3. Ensure the <View> wrapper always has 16px vertical padding via styles.pv4, then forward any incoming paddingTop, paddingBottom or paddingVertical values for added flexibility.
   

   App/src/components/PopoverMenu.tsx

   Lines 430 to 431 in 04414ea

   	{enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
   	{renderWithConditionalWrapper(shouldUseScrollView, scrollContainerStyle, renderedMenuItems)}

<View style={[styles.pv4, {paddingTop, paddingBottom, paddingVertical}]}>
    {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
    {renderWithConditionalWrapper(shouldUseScrollView, restScrollContainerStyle, renderedMenuItems)}
</View>

4. On the outer container <View>, apply styles.pv0 to zero out its vertical padding—since the wrapper <View> already handles padding, and the header text has its own built-in padding.
   

   App/src/components/PopoverMenu.tsx

   Line 427 in 04414ea

   style={[menuContainerStyle, containerStyles]}

style={[menuContainerStyle, containerStyles, styles.pv0]}

5. Because the wrapper <View> already handles padding, the snippet below can be removed:
   

   App/src/components/PopoverMenu.tsx

   Line 317 in 04414ea

   shouldUseScrollView && StyleUtils.getOptionMargin(menuIndex, currentMenuItems.length - 1),

6. Right now, shouldUseScrollView is hard-coded to false, so the ScrollView is never used in MoneyReportHeader’s menu. Add logic to set shouldUseScrollView = true whenever there are more than 5 option items (matching the pattern here and here):
   

   App/src/components/MoneyReportHeader.tsx

   Line 952 in 04414ea

   />

shouldPopoverUseScrollView={applicableSecondaryActions.length > 5}

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

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021935753982277693884

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[clarajones-expensify]

Hi @rojiphil ! Would you mind taking a look at the above proposals? Thank you!