Ensure dev overlay x-ray highlight goes over the island (#9227)

* Ensure dev overlay x-ray highlight goes over the island

* oops

.changeset/spicy-starfishes-shake.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Ensure overlay x-ray z-index is higher than the island

packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts

@@ -15,6 +15,19 @@ export function createHighlight(rect: DOMRect, icon?: Icon) {
 	return highlight;
 }
 
+export function getHighlightZIndex(el: Element) {
+	let highestZIndex = 0;
+	let current: Element | ParentNode | null = el;
+	while(current instanceof Element) {
+		let zIndex = Number(getComputedStyle(current).zIndex);
+		if(!Number.isNaN(zIndex) && zIndex > highestZIndex) {
+			highestZIndex = zIndex;
+		}
+		current = current.parentNode;
+	}
+	return highestZIndex + 1;
+}
+
 export function positionHighlight(highlight: DevOverlayHighlight, rect: DOMRect) {
 	highlight.style.display = 'block';
 	// Make an highlight that is 10px bigger than the element on all sides

packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts

@@ -1,6 +1,6 @@
 import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js';
 import type { DevOverlayHighlight } from '../ui-library/highlight.js';
-import { attachTooltipToHighlight, createHighlight, positionHighlight } from './utils/highlight.js';
+import { attachTooltipToHighlight, createHighlight, getHighlightZIndex, positionHighlight } from './utils/highlight.js';
 
 const icon =
 	'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z"/></svg>';
@@ -41,6 +41,10 @@ export default {
 				const tooltip = buildIslandTooltip(island);
 				attachTooltipToHighlight(highlight, tooltip, islandElement);
 
+				// Set the z-index to be 1 higher than the greatest z-index in the stack.
+				const zIndex = getHighlightZIndex(islandElement);
+				tooltip.style.zIndex = highlight.style.zIndex = zIndex+'';
+
 				canvas.append(highlight);
 				islandsOverlays.push({ highlightElement: highlight, island: islandElement });
 			});