Nuxt Studio sidebar offsets Nuxt DevTools Inspector highlight overlay #375
Description
Environment
| Operating system | Windows 10.0.26200 |
| CPU | AMD Ryzen 7 5800X 8-Core Processor (16 cores) |
| Node.js version | v22.21.1 |
| nuxt/cli version | 3.33.1 |
| Package manager | pnpm@10.30.3 |
| Nuxt version | 4.3.1 |
| Nitro version | 2.13.1 |
| Builder | vite@7.3.1 |
| Config | app, compatibilityDate, components, content, css, devtools, llms, modules, nitro, robots, runtimeConfig, security, site, sitemap, studio, typescript, vite |
| Modules | @nuxt/content@3.11.2, @nuxtjs/tailwindcss@6.14.0, @nuxtjs/sitemap@7.6.0, @nuxtjs/robots@5.7.1, @nuxt/eslint@1.15.2, nuxt-security@2.5.1, nuxt-studio@1.3.3, nuxt-llms@0.2.0 |
Version
1.3.3
Reproduction
I am absolutely sure that the issue is obvious
Description
Not sure if this is a Nuxt DevTools or a Nuxt Studio issue. When the Nuxt Studio sidebar is open and I use the Nuxt DevTools Inspector at the same time, the Inspector highlight/selection box is rendered with an offset.
Hovering elements still targets the page, but the green overlay box appears shifted to the right by the width of the Nuxt Studio left panel.
This makes the Inspector preview inaccurate while Nuxt Studio is expanded.
Without the Nuxt Studio sidebar open, the Inspector overlay appears in the correct position.
Additional context
Here is a demo video:
nuxt-studio-devtools-issues.mp4
Logs