Prevent dev toolbar tooltip from overflowing (#9512)

* fix: prevent dev toolbar toolip from overflowing

* test: add a test case for dev toolbar toolip position

* Create small-emus-deny.md

---------

Co-authored-by: Bjorn Lu <[email protected]>

.changeset/small-emus-deny.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Prevents dev toolbar tooltip from overflowing outside of the screen

packages/astro/e2e/dev-overlay.test.js

@@ -139,6 +139,32 @@ test.describe('Dev Overlay', () => {
 		await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible();
 	});
 
+	test('adjusts tooltip position if off-screen', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/tooltip-position'));
+
+		const overlay = page.locator('astro-dev-toolbar');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
+		await pluginButton.click();
+
+		const auditCanvas = overlay.locator(
+			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
+		);
+		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
+		for (const highlight of await auditHighlights.all()) {
+			await expect(highlight).toBeVisible();
+			await highlight.hover();
+			const tooltip = highlight.locator('astro-dev-toolbar-tooltip');
+			await expect(tooltip).toBeVisible();
+			const tooltipBox = await tooltip.boundingBox();
+			const { clientWidth, clientHeight } = await page.evaluate(() => ({
+				clientWidth: document.documentElement.clientWidth,
+				clientHeight: document.documentElement.clientHeight,
+			}));
+			expect(tooltipBox.x + tooltipBox.width).toBeLessThan(clientWidth);
+			expect(tooltipBox.y + tooltipBox.height).toBeLessThan(clientHeight);
+		}
+	});
+
 	test('can open Settings plugin', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 

packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro

@@ -0,0 +1,21 @@
+---
+
+---
+
+<div>
+  <button role="top-left">Top left</button>
+  <button role="top-right">Top right</button>
+  <button role="bottom-left">Bottom left</button>
+  <button role="bottom-right">Bottom right</button>
+</div>
+
+<style>
+  div {
+    display: grid;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    align-content: space-between;
+    height: 92vh;
+    padding: 20px;
+  }
+</style>

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

@@ -57,13 +57,17 @@ export function attachTooltipToHighlight(
 			const originalRect = originalElement.getBoundingClientRect();
 			const dialogRect = tooltip.getBoundingClientRect();
 
-			// If the tooltip is going to be off the screen, show it above the element instead
+			// Prevent the tooltip from being off the screen
 			if (originalRect.top < dialogRect.height) {
 				// Not enough space above, show below
 				tooltip.style.top = `${originalRect.height + 15}px`;
 			} else {
 				tooltip.style.top = `-${tooltip.offsetHeight}px`;
 			}
+			if (dialogRect.right > document.documentElement.clientWidth) {
+				// Not enough space on the right, align to the right
+        tooltip.style.right = '0px';
+      }
 		});
 	});