Menu Screen has some UI inconsistency issue

[juhise]

Bulk Select button on menu screen on top and bottom doesn't have the equal margin from top and bottom, Refer Screenshot bulk-select-margin.png

After applying the patch, the screen looks like this, refer bulk-select-after-fix.png

Made sure it doesn't break anything else, after applying the fix for it, menu items margin got disturbed so applied fix for that as well, refer menu-item-margin.png

Add menu items from the column on the left. padding of this also got disturbed so fixed this by adding

.nav-menus-php #post-body-content .post-body-plain {
	margin-bottom: 0;
	padding: 0.1em 0;
}

Refer Screenshots: menu-item-colum-left.png & menu-item-colum-left-after-fix.png

[juhise]

Initital Issue of Bulk Select margin

[juhise]

After fix bulk select margin

[juhise]

Menu Items margin got disturbed due to fix for Bulk Select button

[juhise]

After Fix

Related Core Trac Ticket: https://core.trac.wordpress.org/ticket/54217

[mukesh27]

Hi there!

Thanks for the ticket and patch.

Can you please adjust the top space for Bulk select when there is a menu item in the menu?

[juhise]

Hey @mukesh27

Thanks for sharing this issue, I have fixed this, hope it doesn't create any other issue.

[juhise]

Top Spacing after fix

[juhise]

Added one more fix​https://github.com/WordPress/wordpress-develop/pull/1730/commits/307b2094480d1cb0da3ad0b11a19c45abdb07d9f, for new menu menu when there was no title Give your menu a name, then click Create Menu. message doesn't have proper spacing. Even in 5.8 it didn't have consistent spacing from top and bottom
Attaching few screenshots new-menu-with-no-title-5.8.png new-menu-with-no-title-after-current-change.png new-menu-with-no-title-after-fix.png

[juhise]

With 5.8.1

[juhise]

After this ticket fix

[juhise]

After adding fix for this