MacOS/Safari - Reports - Navigation bar is not fully visible on the Reports page after resizing the page

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.95-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team
Device used: Mac 15.2/Safari
App Component: Other

Action Performed:

1. Navigate to https://staging.new.expensify.com
2. Resize the window to smaller size
3. Navigate to Reports in bottom navigation

Expected Result:

The navigation bar is fully visible on the Reports page

Actual Result:

Navigation bar is not fully visible on the Reports page after resizing the page

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6735640_1738879968465.Recording__575.mp4

View all open jobs on GitHub

[melvin-bot]

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

MacOS/Safari - Reports - Navigation bar is not fully visible on the Reports page after resizing the page

What is the root cause of that problem?

• SearchStatusBar will scroll to selected button when first renderer
• layout.left also include the ScrollView position is bigger than 0. It is equal LHP width

App/src/components/Search/SearchStatusBar.tsx

Line 195 in 33a03bf

scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});

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

• Calculate the ScrollView position by onLayout then scroll to right position

scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - scrollViewLeftRef.current - styles.pl5.paddingLeft});

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)

• Subtract the LHP width directly

[linhvovan29546]

Proposal

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

MacOS/Safari - Reports - Navigation bar is not fully visible on the Reports page after resizing the page

What is the root cause of that problem?

When we navigate back from another page, we scroll to the active item.

App/src/components/Search/SearchStatusBar.tsx

Lines 190 to 196 in 33a03bf

	onLayout={(e) => {
	if (!isActive || isScrolledRef.current || !('left' in e.nativeEvent.layout)) {
	return;
	}
	isScrolledRef.current = true;
	scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});
	}}

However, since the value we passed to is always larger than expected(scroll view width), causing the scroll to jump to the last item instead of the active one.

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

Instead of relying on event.nativeEvent.layout.left, we should use measureLayout to calculate the absolute position relative to ScrollView.

App/src/components/Search/SearchStatusBar.tsx

Lines 194 to 195 in 33a03bf

	isScrolledRef.current = true;
	scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});

 if (!isActive || isScrolledRef.current) {
         return;
     }
   isScrolledRef.current = true;
   const target = e.target || e.nativeEvent.target;
    target.measureLayout(scrollRef.current, (x,) => {
     scrollRef.current?.scrollTo({ x: x - styles.pl5.paddingLeft, animated: true });
     })

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

N/A, 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.