Made notices always visible

[jorgefilipecosta]

Description

This PR aims to fix the visual issue described in #4128 and #3777. It makes the notices always visible even when the post is scrolled.
Besides being fixed sticky behavior has required for things to look as expected in resolutions < 600px.

How Has This Been Tested?

Add a post with much content (requires scroll).
Save the post, resize the window to width < 600px scroll from the top until the end and verify the notice is correctly shown and the sticky behavior looks as expected.
Resize the window to points between this set of number {600, 782, 960, >960}, verify that notice always adapts and is always shown in the correct position even the look changes (elements are hidden shown)

Screenshots (jpeg or gifs if applicable):

cc: @afercia

[youknowriad]

Mmm, this is not easy to get right because there's so many use-cases:

For example:

• Close the Post Settings sidebar
• Close the WP left sidebar explicitely

Some of these styles (those concerning the WP left sidebar) are already defined for the .editor-header. Might be good to extract those as a mixin. And we could do another mixin for the right sidebar

[jorgefilipecosta]

Hi @youknowriad, thank you for your review. Yes, this more complex than what I expected. I refactored this and created a mixin as you suggested. The mixin uses the logic implemented for .editor-header, but I found an existing bug and I added minor changes to the logic.
The bug can be replicated by resizing the screen to mobile, opening the responsive menu, keeping it open and resize back to the desktop. The width keeps the same as when the responsive menu was opened no matter if the menu is collapsed or not.
Before:

After:

[youknowriad]

Is it possible to avoid the selector parameter and use &? that way, we could embed the @include call instead of passing the selector as a parameter. I don't know if it's possible personally but seems nicer if so.

[jorgefilipecosta]

Hi @youknowriad, you mean use something like:
.components-notice-list {
@include editor-left;
}
Unfortunately, I don't think this is possible in our case. Even if we could use & all the styles included would be applied to a descendant of .components-notice-list

[youknowriad]

I really like these mixins 👍

[youknowriad]

Nice work here