From af42e0552054b3b4ac784ed78c60f80bfc38d8ca Mon Sep 17 00:00:00 2001
From: Szymon Chmal <szymonchmal@gmail.com>
Date: Tue, 21 May 2024 13:27:06 +0200
Subject: [PATCH] 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              |  8 ++++++
 packages/astro/e2e/dev-toolbar.test.js        | 27 +++++++++++++++++++
 .../src/pages/xray-overlay-positioning.astro  | 19 +++++++++++++
 .../dev-toolbar/apps/utils/highlight.ts       |  3 +++
 4 files changed, 57 insertions(+)
 create mode 100644 .changeset/young-cooks-switch.md
 create mode 100644 packages/astro/e2e/fixtures/dev-toolbar/src/pages/xray-overlay-positioning.astro

diff --git a/.changeset/young-cooks-switch.md b/.changeset/young-cooks-switch.md
new file mode 100644
index 0000000000..fd939e9e26
--- /dev/null
+++ b/.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.
diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js
index 1002b21830..684863f5f3 100644
--- a/packages/astro/e2e/dev-toolbar.test.js
+++ b/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) => {
diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/pages/xray-overlay-positioning.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/xray-overlay-positioning.astro
new file mode 100644
index 0000000000..f601b2c779
--- /dev/null
+++ b/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>
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts
index bcf347c8eb..661b68730d 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts
+++ b/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';
 			}
 		});
 	});