Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: audit list window covered by tooltip and highlight #13373

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: audit list window covered by tooltip and highlight #13373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a105e43
fix: audit list window covered by tooltip and highlight
Mar 6, 2025
66a7778
exclude top right button from e2e test since it is now behind the aud…
Mar 14, 2025
8dbd586
add test
Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/silent-planes-show.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Fixes a bug where highlights and tooltips render over the audit list window.
19 changes: 18 additions & 1 deletion packages/astro/e2e/dev-toolbar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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('/'));

Expand Down
2 changes: 1 addition & 1 deletion packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Highlights have a z-index of 2000000000, tooltips have a z-index of 2000000001

Updated the z-index here to 2000000009 for rare cases where the audit list window is rendered in the same space as the dev toolbar, which has a z-index of 2000000010

I suspect the visibility of the dev toolbar would be higher than the audit list window.

bottom: 72px;
left: 50%;
transform: translateX(-50%);
Expand Down