fix: Inspect panel styles break when host page sets a custom html font-size (rem-based units)
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 72/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- css, typescript
- Domain
- frontend
Research direction
Start in packages/devtools/src/webcomponents/.generated/css.ts and inspect the rem-based dimensions used by the inspect panel. Reproduce the panel with a host page whose html font-size is 41.4px, then verify it renders consistently with the default font size after the CSS units are updated.
Written by the indexing model from the issue text.
Description
🐛 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.
- Dominant language
- TypeScript
- Stars
- 3.3k
- Forks
- 214
- Avg merge
- 19h 45m
- Merged PRs (30d)
- 12
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/devtools
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 68/100
-
enhancement
Difficulty 5/5 Over a week Newbie friendliness 25/100
-
bug needs reproduction
Difficulty 4/5 3-5 days Newbie friendliness 38/100
-
Difficulty 4/5 3-5 days Newbie friendliness 52/100
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
bug clawsweeper:linked-pr-open clawsweeper:needs-live-repro clawsweeper:no-new-fix-pr impact:message-loss issue-rating: 🐚 platinum hermit P2 regression
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100
danielmiessler/LifeOS#2218 ·