[DevTools Bug]: Labels are cut off on Firefox on Linux (Fedora 36)

This issue has been tracked since 2022-09-14.

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.

Screenshot from 2022-09-14 09-33-08

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

github-actions[bot] wrote this answer on 2022-09-14

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

github-actions[bot] wrote this answer on 2022-09-14

Thank you for providing repro steps! Re-opening issue now for triage.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-06
Star Count 195649
Watcher Count 6648
Fork Count 40524
Issue Count 1110

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date