github-actions[bot]
commented
2 years ago @sparkbuzz: We're sorry you've seen this error. ❤️
It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)
Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve
Issues without repros are automatically closed but we will re-open if you update with repro info.
Website or app
https://codesandbox.io/s/hopeful-fog-nxqwgw
Repro steps
When using React DevTools on Firefox 104.0.1 (64-bit) on Linux (Fedora 36 with Gnome Desktop 42) the key labels on the right hand pane are cut off. See screenshot. I'm guessing this is likely because of fonts being used on Linux are different from Windows and macOS. I haven't noticed this problem in Chrome at all, and I don't think it happens on Windows and macOS.
This only happens to editable orange/keys in the props panel, when the keys are black/read only, they render just fine.
I also noticed that React devtools doesn't honor the Firefox advanced font settings like the rest of devtools does. Having the ability to select a different browser monospace font will allow for a workaround to this issue.
How often does this bug happen?
Every time
DevTools package (automated)
No response
DevTools version (automated)
No response
Error message (automated)
No response
Error call stack (automated)
No response
Error component stack (automated)
No response
GitHub query string (automated)
No response