[HOLD for payment 2024-06-13] Central pane padding changes when RHP is opened

[mountiny]

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

Action Performed:

Break down in numbered steps

1. Go to some page that has a central pane from which you can open RHP so go to Settings > About
2. Click on the App download links
3. Notice how the central pane content shifts

Expected Result:

Describe what you think should've happened

No shift in styles in the central pane

Actual Result:

Describe what actually happened

Its alive, it moves

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[mountiny]

@rayane-djouah @getusha this is most likely a regression from #36292 can you please confirm and handle this issue as such?

[dragnoir]

Proposal

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

Central pane padding changes when RHP is opened

What is the root cause of that problem?

We are using shouldUseNarrowLayout here

App/src/components/Section/index.tsx

Line 131 in 97d6d87

<View style={[styles.w100, isCentralPane && (shouldUseNarrowLayout ? styles.p5 : contentPaddingOnLargeScreens ?? styles.p8)]}>

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

We recently added a new update to the logic of shouldUseNarrowLayout.

We are replacing shouldUseNarrowLayout by isSmallScreenWidth where it doesn't fits the conditions described here

We need to use isSmallScreenWidth here

App/src/components/Section/index.tsx

Line 131 in 97d6d87

<View style={[styles.w100, isCentralPane && (shouldUseNarrowLayout ? styles.p5 : contentPaddingOnLargeScreens ?? styles.p8)]}>

What alternative solutions did you explore?

[dragnoir]

@mountiny I think it's a regression from #43013

[roryabraham]

Sorry about that! I think I understand the problem. useResponsiveLayout is correctly checking if there's a modal active, but it's not correctly checking that the current component is a child of that active modal. I will work on a fix for this ASAP

[roryabraham]

Here's my solution: #43074