DIG-1410: Disappearing sidebar bug mobile size sidebar

[OrdiNeu]

Fix the blocking of user input when the size of the screen changes with the sidebar open on the search page. This can be safely merged into the model_3 branch.

Ticket(s)

• DIG-1410

Description

• This was hard to track down: when the user is on the search page, has the sidebar open, and then resizes their screen past the "medium" screensize breakpoint (about half the size of my monitor), the entire screen stops accepting input. I tracked this down to the following behaviour:

1. The screensize trips past the Medium threshold, causing the Sidebar's MUI Drawer component to switch variants from "permanent" to "temporary"
2. A separate useEffect in MainLayout sees the switch, and immediately sets off to close the sidebar (so that the user isn't looking at a full-screen sidebar upon switching sizes, intended behaviour)
3. The first rerender partially completes, and React attempts to draw a modal-full-screen sidebar
4. The modal is immediately closed
5. An internal MUI widget known as "Mui-Presentation", which is used to handle modal dialogues, remains open

Screenshots (if appropriate)

Before PR

Screencast.from.2024-08-12.02.05.51.PM.webm

After PR

Screencast.from.2024-08-12.01.55.46.PM.webm

Types of Change(s)

• 🪲 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)

Has it been tested for:

• My change requires a change to the documentation
• I have updated the documentation accordingly
• Prettier linter doesn't return errors
• Production branch PR browser testing: Chrome, Firefox, Edge, etc.
• Locally tested
• Dev server tested
• Production tested when merging into stable/production branch
• Runbook tasks pass locally/on UHN-Dev
• If visuals have changed, Runbook has been updated with new screenshots

[CourtneyGosselin]

LGTM there is a leftover useState but that is unrelated to this change