diff options
4 files changed, 57 insertions, 0 deletions
diff --git a/.changeset/young-cooks-switch.md b/.changeset/young-cooks-switch.md new file mode 100644 index 000000000..fd939e9e2 --- /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 1002b2183..684863f5f 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 000000000..f601b2c77 --- /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 bcf347c8e..661b68730 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'; } }); }); |