Wp-calypso: Media Section: Fix sticky nav styling for smaller viewports

[gwwar]

Currently as we scroll down the action bar doesn't fully cover the div behind.

To reproduce:

• Navigate to http://calypso.localhost:3000/media
• Resize your window to something small
• Select a site
• Scroll down

[retrofox]

The perspective CSS rule breaks the fixed position of the sticky panel.

https://github.com/Automattic/wp-calypso/blob/master/client/components/main/style.scss#L26

@include breakpoint( "<660px" ) {
  backface-visibility: hidden;
  perspective: 1000;
}

[gwwar]

Testing further it seems like we have a few mobile cases, where we either should not attempt to sticky the nav or fix the component to work in the view.

✅ This doesn't attempt to collapse at all:

Collapses incorrectly without plan storage visible:

Collapses incorrectly with plan storage visible:

[iamtakashi]

I'd say let's make it not sticky less than 660px width for now.

[iamtakashi]

The perspective CSS rule breaks the fixed position of the sticky panel.

I've suggested in Slack too, but we could only add perspective only when the sidebar is focused because that's for keeping the sidebar on top of the content, and it's only needed when the sidebar is open.

.focus-sidebar .main,
.focus-sites .main {
    perspective: 1000;
}