Notice on Widgets Screen overlaps Page content

[DaisyOlsen]

Describe the bug
When a nag or notice is present on the Widgets Screen the page content overlaps the notice.

To reproduce
Steps to reproduce the behavior:

1. Trigger a nag or notice(In my case WooCommerce)
2. Access Widgets Screen with Gutenberg plugin active
3. See overlapping text

Expected behavior
Page content should push down below any on-screen notices

Screenshots

Editor version (please complete the following information):

• WordPress version: 5.5.1
• If the Gutenberg plugin is installed, which version is it? 9.1.1

[noisysocks]

@DaisyOlsen: How exactly do you trigger that notice? I installed WooCommerce but wasn't able to see it.

[DaisyOlsen]

@noisysocks I just recreated the scenario and I guess I left a step out. - There has to be an admin notice loading on the screen. I was able to get one to display by installing and activating WooCommerce, skipping setup and then activating Facebook under marketing. I'm sure there are other plugins that would add a notice with fewer steps, but I don't have any examples at hand.

Basically, it seems that some pretty aggressive positioning is used in the styling, causing things to stack up. I didn't dig far enough to see if there was an easy solution.

[Mamaduka]

It looks like Facebook for WooCommerce plugin used inline style to show notices. It overrides widget screen styles to hide notices.

I don't think we should fix this issue on our side since the widget editor screen does not cause it.

Notice added using default method are hidden and don't overlap with the header. Example:

add_action( 'admin_notices', function() {
	?>
	<div class="notice notice-success is-dismissible">
		<p><?php _e( 'Example notice...' ); ?></p>
	</div>
	<?php
} );