Skip to content

fix: Inspect panel styles break when host page sets a custom html font-size (rem-based units) #973

@x-ray-s

Description

@x-ray-s

🐛 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions