[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

[roryabraham]

Put PR in for review: #43074

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.79-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Search bottom-up if a component is in a narrow modal navigator #43074

If no regressions arise, payment will be issued on 2024-06-13. 🎊

For reference, here are some details about the assignees on this issue:

• @hoangzinh requires payment (Needs manual offer from BZ)
• @getusha requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@hoangzinh / @getusha] The PR that introduced the bug has been identified. Link to the PR:
• [@hoangzinh / @getusha] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@hoangzinh / @getusha] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@hoangzinh / @getusha] Determine if we should create a regression test for this bug.
• [@hoangzinh / @getusha] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kevinksullivan] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.81-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Search bottom-up if a component is in a narrow modal navigator #43074

If no regressions arise, payment will be issued on 2024-06-18. 🎊

For reference, here are some details about the assignees on this issue:

• @hoangzinh requires payment (Needs manual offer from BZ)
• @getusha requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@hoangzinh / @getusha] The PR that introduced the bug has been identified. Link to the PR:
• [@hoangzinh / @getusha] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@hoangzinh / @getusha] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@hoangzinh / @getusha] Determine if we should create a regression test for this bug.
• [@hoangzinh / @getusha] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kevinksullivan] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.82-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Search bottom-up if a component is in a narrow modal navigator #43074

If no regressions arise, payment will be issued on 2024-06-20. 🎊

For reference, here are some details about the assignees on this issue:

• @hoangzinh requires payment (Needs manual offer from BZ)
• @getusha requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@hoangzinh / @getusha] The PR that introduced the bug has been identified. Link to the PR:
• [@hoangzinh / @getusha] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@hoangzinh / @getusha] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@hoangzinh / @getusha] Determine if we should create a regression test for this bug.
• [@hoangzinh / @getusha] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kevinksullivan] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[kevinksullivan]

@hoangzinh @getusha can you finish out the steps above?

[kevinksullivan]

It seems like only @hoangzinh requires payment for the PR review. Is that right?

[melvin-bot]

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

[kevinksullivan]

hey @CortneyOfstad I am OOO the rest of the week so tapping you in here. Baed on the response to my question above I think we'll need to spin up a job and pay @hoangzinh this week. Thank you!

[CortneyOfstad]

@getusha or @hoangzinh — can you complete the checklist before EOD today so there is not a delay in payment tomorrow?

Per the SO here @getusha gets paid via NewDot, but @hoangzinh I sent you an offer via Upwork here. Please let me know once you accept so I can get this paid ASAP tomorrow.

Thanks!

[getusha]

@CortneyOfstad only @hoangzinh need to get paid. i wasn't involved thanks!

[CortneyOfstad]

No worries and thank you for confirming @getusha!

[hoangzinh]

Hi @CortneyOfstad We don't have payment in this issue. It was still in the regression period from a PR that I reviewed. Therefore, we can close this issue.

[CortneyOfstad]

Thanks @hoangzinh! Withdrew the proposal in Upwork and closing!