Svelte inspect UI elements are obscured by elements in the top layer

[dunhamjared]

Describe the bug

When I hover over elements that are part of the browser top layer, the inspection label is rendered behind the element. This seems to occur when using native components like <dialog> opened via showModal, or elements with the popover attribute.

Expected

I expected the Svelte inspect UI elements to be rendered within the top layer or at a priority that ensures they remain visible over all other content.

Demo

Screen.Recording.2026-03-25.at.11.55.47.AM.mov

Demo recorded in Chrome 146.0.7680.153 (Official Build) (arm64)

Reproduction URL

https://github.com/dunhamjared/svelte-inspect-top-layer-issue

Reproduction

1. Install dependencies with npm install
2. Start a development server: npm run dev -- --open
3. Click the "Open Modal" button, and then activate the svelte inspect tool.

Logs

System Info

System:
    OS: macOS 26.3.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 92.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 8.15.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 146.0.7680.165
    Firefox: 139.0.4
    Safari: 26.3.1
  npmPackages:
    @sveltejs/adapter-auto: ^7.0.0 => 7.0.1 
    @sveltejs/kit: ^2.50.2 => 2.55.0 
    @sveltejs/vite-plugin-svelte: ^6.2.4 => 6.2.4 
    svelte: ^5.54.0 => 5.55.0 
    vite: ^7.3.1 => 7.3.1

[dunhamjared]

Here is my dirty quick hack I'm using to get it working enough for me:

1. Configured the host element as a manual popover:
   dunhamjared@5a82556

2. Updated the enable() function so that anytime the inspect is enabled, it retriggers the popover state.
   (this is needed because the top layer uses a last in, first out rule)
   dunhamjared@4ccafaa