diff --git a/.changeset/silent-planes-show.md b/.changeset/silent-planes-show.md new file mode 100644 index 000000000000..0df1ab5c6e5a --- /dev/null +++ b/.changeset/silent-planes-show.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes a bug where highlights and tooltips render over the audit list window. diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js index 628b3af3aa80..aa03680942e4 100644 --- a/packages/astro/e2e/dev-toolbar.test.js +++ b/packages/astro/e2e/dev-toolbar.test.js @@ -241,7 +241,8 @@ test.describe('Dev Toolbar', () => { const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]'); const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight'); - for (const highlight of await auditHighlights.all()) { + const highlights = (await auditHighlights.all()).filter((_, index) => index !== 1); + for (const highlight of highlights) { await expect(highlight).toBeVisible(); await highlight.hover(); const tooltip = highlight.locator('astro-dev-toolbar-tooltip'); @@ -256,6 +257,22 @@ test.describe('Dev Toolbar', () => { } }); + test('tooltip is rendered behind audit list window', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/tooltip-position')); + + const toolbar = page.locator('astro-dev-toolbar'); + const appButton = toolbar.locator('button[data-app-id="astro:audit"]'); + await appButton.click(); + + const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]'); + const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight'); + const highlight = auditHighlights.nth(1) + + await expect(async() => { + await highlight.hover({timeout: 100}); + }).rejects.toThrowError() + }); + test('can open Settings app', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts index 472e8d7c6409..a87cad395cd3 100644 --- a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts @@ -83,7 +83,7 @@ export class DevToolbarAuditListWindow extends HTMLElement { "Noto Color Emoji"; color: rgba(191, 193, 201, 1); position: fixed; - z-index: 999999999; + z-index: 2000000009; bottom: 72px; left: 50%; transform: translateX(-50%);