🐛 The bug
When a host application uses postcss-pxtorem (or similar tools) to set a non-default font-size on for mobile responsive layouts (e.g. font-size: 41.4px instead of the browser default 16px), the nuxt-devtools-inspect-panel web component renders incorrectly.
The root cause is that the generated CSS in packages/devtools/src/webcomponents/.generated/css.ts uses rem units.
Since rem is relative to the host page's font-size — not the web component's own root — all rem-based
dimensions in the inspect panel scale incorrectly.
🛠️ To reproduce
[]
🌈 Expected behavior
The inspect panel should render consistently regardless of the host page's root font-size.
ℹ️ Additional context
Replace rem with px (or em scoped to the component's own font-size) in the web component's CSS, since web components don't inherit a predictable rem baseline from the host page.
🐛 The bug
When a host application uses postcss-pxtorem (or similar tools) to set a non-default font-size on for mobile responsive layouts (e.g. font-size: 41.4px instead of the browser default 16px), the nuxt-devtools-inspect-panel web component renders incorrectly.
The root cause is that the generated CSS in packages/devtools/src/webcomponents/.generated/css.ts uses rem units.
Since rem is relative to the host page's font-size — not the web component's own root — all rem-based
dimensions in the inspect panel scale incorrectly.
🛠️ To reproduce
[]
🌈 Expected behavior
The inspect panel should render consistently regardless of the host page's root font-size.
ℹ️ Additional context
Replace rem with px (or em scoped to the component's own font-size) in the web component's CSS, since web components don't inherit a predictable rem baseline from the host page.