[$250] Wrong LHN UI shows in Reports page

[m-natarajan]

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.2.93-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @ShridharGoel
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

Precondition: Company card assigned to user

1. Navigate to workspace settings > Company cards
2. Click on the assigned company card
3. Click on "View transactions"
4. Observe the Reports LHN

Expected Result:

The background of the suggested searches menu should be white.

Actual Result:

The background of the suggested searches menu is grey. It stays the same even on changing the selected item.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Recording.2152.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022011106550737476442
• Upwork Job ID: 2011106550737476442
• Last Price Increase: 2026-02-11

Issue Owner

Current Issue Owner: @abdulrahuman5196

[melvin-bot]

Triggered auto assignment to @sonialiap (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.

[nyomanjyotisa]

Proposal

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

Wrong LHN UI shows in Reports page

What is the root cause of that problem?

searchSidebar style is missing a backgroundColor property, while the regular sidebar style includes backgroundColor: theme.sidebar

App/src/styles/index.ts

Lines 1603 to 1610 in f7265ef

	searchSidebar: {
	width: variables.sideBarWithLHBWidth,
	height: '100%',
	justifyContent: 'space-between',
	borderRightWidth: 1,
	borderColor: theme.border,
	marginLeft: variables.navigationTabBarSize,
	},

App/src/styles/index.ts

Lines 1613 to 1616 in f7265ef

	sidebar: {
	backgroundColor: theme.sidebar,
	height: '100%',
	},

When navigating from company card page:

1. The SearchFullscreenNavigator is pushed on top of the WorkspaceSplitNavigator
2. The SearchSidebar (rendered as ExtraContent) is rendered inside NavigationContent
3. On wide layouts, NavigationContent has a transparent background
   

   App/src/libs/Navigation/NavigationRoot.tsx

   Line 192 in f7265ef

   background: shouldUseNarrowLayout ? theme.appBG : 'transparent',

4. Without its own background, SearchSidebar shows the grey background from a parent container

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

Add backgroundColor: theme.sidebar to the searchSidebar style to match the regular sidebar style

        searchSidebar: {
            width: variables.sideBarWithLHBWidth,
            height: '100%',
            justifyContent: 'space-between',
            borderRightWidth: 1,
            borderColor: theme.border,
            marginLeft: variables.navigationTabBarSize,
            backgroundColor: theme.sidebar,
        },

App/src/styles/index.ts

Lines 1603 to 1610 in f7265ef

	searchSidebar: {
	width: variables.sideBarWithLHBWidth,
	height: '100%',
	justifyContent: 'space-between',
	borderRightWidth: 1,
	borderColor: theme.border,
	marginLeft: variables.navigationTabBarSize,
	},

What alternative solutions did you explore? (Optional)

None

[ShridharGoel]

Note to C+: Please check edit timestamps of the RCA.

Proposal

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

When navigating to Reports via Company Cards and then viewing transactions, the left-hand navigation (LHN) area shows a grey background behind the menu items.

What is the root cause of that problem?

The Search fullscreen sidebar uses styles.searchSidebar, which does not set a background color. As a result, the underlying Search screen wrapper background (appBG, light grey) shows through.

This is visible when navigating from Company Cards because that path explicitly routes to Search (ROUTES.SEARCH_ROOT) and shows the Search fullscreen sidebar. When opening Reports directly, we land on the same Search navigator, but the mismatch is not there because the sidebar area and content context already match the Search view. The root issue is still the same: the Search sidebar is transparent and lets the screen background show through.

Search sidebar styles:

App/src/styles/index.ts

Lines 1603 to 1610 in 34d73f2

	searchSidebar: {
	width: variables.sideBarWithLHBWidth,
	height: '100%',
	justifyContent: 'space-between',
	borderRightWidth: 1,
	borderColor: theme.border,
	marginLeft: variables.navigationTabBarSize,
	},

Screen wrapper background uses appBG:

App/src/components/ScreenWrapper/ScreenWrapperContainer.tsx

Lines 203 to 208 in 34d73f2

	return (
	<View
	ref={ref}
	// This style gives the background for the screens. Stack cards are transparent to make different width screens in RHP possible.
	style={[styles.flex1, styles.appBG, styles.screenWrapperContainerMinHeight(minHeight)]}
	// eslint-disable-next-line react/jsx-props-no-spreading, react-compiler/react-compiler

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

Set a background color for searchSidebar to match the standard sidebar. This ensures the LHN area has a consistent background and no longer shows the Search screen’s grey appBG behind the menu items.

Updated code:

searchSidebar: {
    ....
    backgroundColor: theme.sidebar,
},

[melvin-bot]

@sonialiap Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@sonialiap Still overdue 6 days?! Let's take care of this!

[melvin-bot]

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