binaryage / binaryage/cljs-devtools

Firefox overrides break native-reference-wrapper-style

Open
#81 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Clojure
Stars
1.1k
Forks
51
PR merge metrics
No merged PRs in 30d

Description

It took me a while to figure out why in the [re-frame-10x](https://github.com/day8/re-frame-10x) view of my Re-frame data, from a certain point in time, the panel gets largely erased, looking as follows (the right half of the screenshot is the panel):

![Image](https://github.com/user-attachments/assets/b975db1f-0ff5-44c4-b891-f1e638032cf4)

Having grepped through the code of that library and then of cljs-devtools, I figured out the Firefox overrides are apparently to blame -- causing this "native reference wrapper" to lose its "position: relative" style, which in turn results in its first child (effectively "position: absolute; inset: 1px", as defined by `get-inner-background-style`) to take much more space than intended. In the context of the Re-frame-10x debugging panel, it grows to fill the entire panel with its white background.

Indeed, in Chromium, the Re-frame-10x panel works fine:

![Image](https://github.com/user-attachments/assets/21b799a3-1458-42e2-8e23-c01473811115)

I can imagine two reasonable solutions:

1. Add the "position: relative" specification (and maybe "display: inline-flex", too?) also to the native-reference-wrapper-style config in the Firefox overrides.
2. Make the CSS values specified in the overrides _extend_ the defaults instead of replacing them.

I don't know enough about why the overrides are configured as they are currently configured, so I am also not sure which would be the right way to proceed. For now, I will try to patch this bug in my user config.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.