Navigation block: fix padding on mobile overlay when global padding is 0 (#53725)

* force min value for padding to be 2rem

* fallback for when the css variables are not defined

* Allow the padding to be smaller than 2rem

* Add fix to avoid trigger hover state on links when overlay opens

---------

Co-authored-by: scruffian <ben@scruffian.com>
Co-authored-by: Dave Smith <getdavemail@gmail.com>

Author: 3 people

packages/block-library/src/navigation/style.scss

@@ -506,10 +506,10 @@ button.wp-block-navigation-item__content {
 		@include reduce-motion("animation");
 
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
-		padding-top: var(--wp--style--root--padding-top, 2rem);
-		padding-right: var(--wp--style--root--padding-right, 2rem);
-		padding-bottom: var(--wp--style--root--padding-bottom, 2rem);
-		padding-left: var(--wp--style--root--padding-left, 2rem);
+		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
+		padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
+		padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
+		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
 
 		// Allow modal to scroll.
 		overflow: auto;

test/e2e/specs/editor/blocks/navigation-colors.spec.js

@@ -413,6 +413,10 @@ class ColorControl {
 			.getByRole( 'button', { name: 'Open menu' } )
 			.click();
 
+		// Move the mouse to avoid accidentally triggering hover
+		// state on the links once the overlay opens.
+		await this.page.mouse.move( 1000, 1000 );
+
 		const overlay = this.editor.canvas
 			.locator( '.wp-block-navigation__responsive-container' )
 			.filter( { hasText: 'Submenu Link' } );