Editor top bar and top toolbar separated by notices, notices overlapped when scrolling

[talldan]

Description

Recently the BlockTools component was introduced and the TopToolbar was moved below notices, which has the benefit that users can shift-tab directly from a block to the top toolbar. It had a couple of unwanted side-effects:

• Notices look a little unusual when they separate the editor topbar and the top toolbar.
• When scrolling, the top toolbar moves and overlaps the notices.

Step-by-step reproduction instructions

1. Enable top toolbar mode
2. Create some notices using the following snippet in the browser console - wp.data.dispatch( 'core/notices' ).createInfoNotice( 'hello' );
3. Add enough blocks that the editor has a scroll bar
4. Scroll up and down

Expected behaviour

The visual aspect of the notices and toolbars are improved and the top toolbar doesn't overlap the notices.

Screenshots or screen recording (optional)

[youknowriad]

@jasmussen Is this something we should close now?

[jasmussen]

Yes, I had thought that my PR merging would do that.