[2.x] Fix search modal overlapping the navigation drawer on mobile

[karl-bullock]

What / why

On phones the global search input is rendered inside the slide-out navigation drawer. Tapping it opens the full-screen SearchModal, but the drawer is never closed first, so it visibly overlaps the modal while the modal animates in. The screen "glitches" for a moment and then corrects itself once the modal settles on top.

Root cause

.App-drawer is positioned at z-index: var(--zindex-modal) (1050), the same base the modal system builds on:

• ModalManager -> calc(var(--zindex-modal) + var(--modal-number))
• .Modal-backdrop -> calc(var(--zindex-modal) + var(--modal-count) - 2)

While the modal mounts, --modal-number is 0, so for ~50-150ms:

• the still-open drawer stays at 1050 and covers the left of the screen,
• the modal backdrop resolves to 1048/1049, i.e. below the drawer, so only the area the drawer does not cover gets dimmed, and
• ModalManager then mounts at 1050 and the modal slides up over the drawer.

The net effect is the drawer overlapping the opening search modal before it is finally covered.

Fix

Close the drawer as soon as search is activated, in the Search onclick handler, before the modal is shown. Placing it here rather than inside openSearchModal lets the drawer finish its slide-out during the existing 150ms delay, so the modal opens over the page instead of over the drawer. Hiding it at modal-show time is too late: the drawer's 0.2s slide-out then races the modal and the overlap still shows.

app.drawer.hide() returns early when the drawer is not open, so this is a no-op on wider screens and in the admin frontend (the search component is shared, and app.drawer is created by the common Application).

Testing

Reproduced on a clean 2.0.0-rc.5 install at a 390px viewport, opening the drawer and tapping search as both a guest and a logged-in user. Before the change the drawer overlaps the opening modal for ~150ms; after it, the drawer slides out first and the modal opens cleanly. I confirmed frame by frame that the .App-navigation header (z-index 1000/1001) is never the element on top, so the mis-layering is the drawer versus the modal, not the header.