fix(astro): positioning of inspection tooltip in RTL mode (#11081)

* fix: prevent overlay from going out of the view

* test: add test case for positioning

* chore: add changeset entry

---------

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

.changeset/young-cooks-switch.md

@@ -0,0 +1,8 @@
+---
+"astro": patch
+---
+
+Correctly position inspection tooltip in RTL mode
+
+When RTL mode is turned on, the inspection tooltip tend to overflow the window on the left side.
+Additional check has been added to prevent that.

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

@@ -100,6 +100,33 @@ test.describe('Dev Toolbar', () => {
 		await expect(xrayHighlightTooltip).not.toBeVisible();
 	});
 
+	test('xray tooltips don\'t overflow', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/xray-overlay-positioning'));
+
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:xray"]');
+		await appButton.click();
+
+		const executeTest = async () => {
+			const xrayCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:xray"]');
+			const xrayHighlights = xrayCanvas.locator('astro-dev-toolbar-highlight');
+			const xrayHighlightsCount = await xrayHighlights.count();
+
+			for (let i = 0; i < xrayHighlightsCount; i++) {
+				const currentHighlight = xrayHighlights.nth(i);
+				await currentHighlight.hover();
+				await expect(currentHighlight.locator('astro-dev-toolbar-tooltip')).toBeInViewport({ ratio: 0.9 });
+			}
+		}
+
+		// LTR
+		await executeTest();
+
+		// RTL
+		await page.locator('body').evaluate(element => element.dir = 'rtl');
+		await executeTest();
+	});
+
 	test('xray escapes props content', async ({ page, astro }) => {
 		let isAlertCalled = false;
 		page.on('dialog', async (dialog) => {

packages/astro/e2e/fixtures/dev-toolbar/src/pages/xray-overlay-positioning.astro

@@ -0,0 +1,19 @@
+---
+import { HelloWorld } from '../components/HelloWorld';
+---
+
+<div style="position: absolute; left: 0; top: 0;">
+	<HelloWorld name={"Left top"} client:load />
+</div>
+
+<div style="position: absolute; right: 0; top: 0;">
+	<HelloWorld name={"Right top"} client:load />
+</div>
+
+<div style="position: absolute; left: 0; bottom: 0;">
+	<HelloWorld name={"Left bottom"} client:load />
+</div>
+
+<div style="position: absolute; right: 0; bottom: 0;">
+	<HelloWorld name={"Right bottom"} client:load />
+</div>

packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts

@@ -77,6 +77,9 @@ export function attachTooltipToHighlight(
 			if (dialogRect.right > document.documentElement.clientWidth) {
 				// Not enough space on the right, align to the right
 				tooltip.style.right = '0px';
+			} else if (dialogRect.left < 0) {
+				// Not enough space on the left, align to the left
+				tooltip.style.left = '0px';
 			}
 		});
 	});