Media Library: fix elevation visual bug in search icon

[retrofox]

IMPORTANT

• This PR is targeting to try/media-section-v2.
• This PR fixes Media: tweaks in gallery search styles #11804 bug.

---

Testing:

1. Go to the Media Library: http://calypso.localhost:3000/media/<site>. You should have enough media files to be able to make scrolling up on the media page.
2. Pay attention to the overlapping of the search-icon and the plan-storage components with the filters bar of the media library.

[matticbot]

Test live: https://calypso.live/?branch=fix/media-search-bar-visual-bug

[iamtakashi]

Design wise 👍

[matticbot]

@retrofox This PR needs a rebase

[gwwar]

Just fyi that you can use this Chrome extension to figure out the parent context https://chrome.google.com/webstore/detail/z-context/jigamimbjojkdgnlldajknogfgncplbh

So a few things here:

1. The parent stacking context is .section-nav to make this more explicit for the media library I'd recommend using:

'.media-library .section-nav': ( '.search.is-expanded-to-container' : 1,

2. Why is this value 20? It doesn't appear like we need to beat any other items in the current stacking context so I think 1 works here just fine. Let me know if you had some corner cases in mind.

As an aside, we also have a z-index on the search icon, but it does nothing since the position is static.

[gwwar]

Let's rebase this one @retrofox

[retrofox]

Just fyi that you can use this Chrome extension to figure out the parent context https://chrome.google.com/webstore/detail/z-context/jigamimbjojkdgnlldajknogfgncplbh

awesome

The parent stacking context is .section-nav to make this more explicit for the media library I'd recommend using ...

👍

Why is this value 20?

I tested with values less than 20 and it overlapped the media library header. Tested with 1 and it works ok.

As an aside, we also have a z-index on the search icon, but it does nothing since the position is static.

yeah, right. I wonder why we are keeing this value.

rebased and tested

[gwwar]

Thanks @retrofox Let's