diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 180b40b43daca..eb8ef7683e198 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/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;
diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
index 1fd8bd39f520a..42ecb29aa6650 100644
--- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js
+++ b/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' } );