Fix out-of-bounds menus on the admin (#27958)

* [not verified] Fix the out-of-bounds menu. It also caused the menu to flicker if you positioned the mouse in a specific position

* [not verified] Add the listener in the init funciton

* [not verified] Fix the arrow display

* [not verified] Fix missing spaces and changelog text

* [not verified] Prevent code from running twice

* [not verified] Add explanation for using a fallback for the viewport check

* [not verified] Remove the focus when leave the main element

* [not verified] Use the link height instead of hardcoding it

* [not verified] Checking if the site is atomic through a global variable instead of using a class to do it

Co-authored-by: Valter Lorran <valter.lorran@automattic.com>

projects/plugins/jetpack/changelog/fix-out-of-bounds-menu

@@ -0,0 +1,3 @@
+Significance: patch
+Type: bugfix
+Comment: Fix the submenu positioning for the masterbar left nav

projects/plugins/jetpack/modules/masterbar/admin-menu/admin-menu.js

@@ -109,6 +109,44 @@
 				}
 			);
 		}
+
+		if ( jetpackAdminMenu.isAtomic ) {
+			document.querySelectorAll( 'li.wp-has-submenu.wp-not-current-submenu' ).forEach( function ( el ) {
+				const submenu = el.querySelector( '.wp-submenu' );
+				const linkElement = el.querySelector( 'a' );
+
+				el.addEventListener( 'mouseover', function() {
+					submenu.style.display = null;
+					submenu.style.top = '-1px';
+					if ( ! isElementInViewport( submenu ) ) {
+						// Repoisition the submenu to the top of the menu item.
+						submenu.style.top = ( linkElement.clientHeight - submenu.clientHeight ) + 'px';
+					}
+					linkElement.focus();
+				} );
+
+				el.addEventListener( 'mouseleave', function() {
+					submenu.style.display = 'none';
+					submenu.style.top = null;
+					if ( document.activeElement === linkElement ) {
+						linkElement.blur();
+					}
+				} );
+			} );
+		}
+	}
+
+	function isElementInViewport( el ) {
+		var rect = el.getBoundingClientRect();
+
+		return (
+			rect.top >= 0 &&
+			rect.left >= 0 &&
+			// Tries to primarily use the window viewport, but if that's not available, uses the documentElement.
+			// The innerWidth attribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.
+			rect.bottom <= ( window.innerHeight || document.documentElement.clientHeight ) &&
+			rect.right <= ( window.innerWidth || document.documentElement.clientWidth )
+		);
 	}
 
 	function makeAjaxRequest( method, url, contentType, body = null, callback = null ) {

projects/plugins/jetpack/modules/masterbar/admin-menu/class-base-admin-menu.php

@@ -8,6 +8,7 @@
 namespace Automattic\Jetpack\Dashboard_Customizations;
 
 use Automattic\Jetpack\Status;
+use Automattic\Jetpack\Status\Host;
 
 /**
  * Class Base_Admin_Menu
@@ -277,6 +278,7 @@ public function enqueue_scripts() {
 			array(
 				'upsellNudgeJitm'  => wp_create_nonce( 'upsell_nudge_jitm' ),
 				'jitmDismissNonce' => wp_create_nonce( 'jitm_dismiss' ),
+				'isAtomic'         => ( new Host() )->is_woa_site(),
 			)
 		);
 	}