internal: use max z index for assertions menu overlay (#32130)

* internal: use max z-index for assertions menu overlay

* update test html for high z-index

Author: mabela416

packages/app/src/runner/dom.ts

@@ -52,7 +52,7 @@ export function getOrCreateHelperDom ({ body, className, css, studioActive = fal
       left: '0',
       width: '100%',
       height: '100%',
-      zIndex: '9999',
+      zIndex: '2147483647', // use the max z-index value to ensure the shadow dom is on top of all other elements
     })
   }
 

system-tests/projects/experimental-studio/cypress/e2e/highZIndexModal.html

@@ -9,7 +9,7 @@
 			width: 100%;
 			height: 100%;
 			background-color: rgba(0, 0, 0, 0.5);
-			z-index: 2000;
+			z-index: 2147483647;
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -81,10 +81,10 @@
 			<button class="modal-close" onclick="closeModal()">&times;</button>
 			<div class="modal-title">Large Modal with High Z-Index</div>
 			<div class="modal-body">
-				<p>This is a large modal that demonstrates a z-index of 2000. The modal covers the entire viewport and is positioned above all other elements on the page.</p>
+				<p>This is a large modal that demonstrates a z-index of 2147483647. The modal covers the entire viewport and is positioned above all other elements on the page.</p>
 				<p>Key features of this modal:</p>
 				<ul>
-					<li>Z-index: 2000 (very high priority)</li>
+					<li>Z-index: 2147483647 (highest priority)</li>
 					<li>Full viewport coverage</li>
 					<li>Semi-transparent background overlay</li>
 					<li>Centered content with responsive design</li>