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 <[email protected]>
withastro · May 21, 2024 · af42e05 · af42e05
1 parent b5f95b2
commit af42e05
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 0 deletions.
diff --git a/.changeset/young-cooks-switch.md 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
@@ -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
@@ -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
@@ -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';
 			}
 		});
 	});