Side Panel is displayed without an overlay

[blazejkustra]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

• Log in on web
• The width of the page have to be between 900-1100
• Open avatar page: https://staging.new.expensify.com/settings/profile/avatar
• Change the URL manually to: https://staging.new.expensify.com/settings/profile
• Open Side Panel with Concierge

Expected Result:

Side panel opens and overlay is displayed next to it

Actual Result:

Side panel opens without the overlay

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

@aimane-chnaif reported this bug here:

Just tried again on staging and now consistently reproducible. No way to get rid off. Might be related to stale Onyx value?

[aimane-chnaif]

Assign me here too

[dmkt9]

• The width of the page have to be between 900-1100

I think the overlap is expected behavior with that screen width.

App/src/components/SidePanel/SidePanelContextProvider.tsx

Line 55 in f330976

const shouldApplySidePanelOffset = isExtraLargeScreenWidth && !shouldHideSidePanel;

[blazejkustra]

Either @mrejdak or I will take care of this @dmkt9 😄

[mrejdak]

Hey! I'm Michał Rejdak from Software Mansion, an expert agency, and I'm commenting for assignment!