React-devtools: Right pane gets pushed off screen

[idris]

This didn't always happen, but in the last month or so I noticed that there is no horizontal scrolling where the elements are shown, so the right pane (with props) is pushed off screen. Below are some screenshots:

Completely hidden:

Semi-hidden when I make the window really wide:

[jdivock]

Same
What I see in full screen

After I drag the browser left off screen to expand

[idris]

Looks like we're both using Relay, I wonder if that has something to do with it

[gaearon]

I can't reproduce this. Assuming it was fixed.

[classyrancor]

This is happening to me today. It looks to do with the depth of the tree that you are trying to look through. It is fine when you are looking near the top of the tree.

Once you try and select something further down the tree that is many levels deep the right pane gets pushed off the screen.

[gaearon]

cc @bvaughn might be related to recent changes.

@classyrancor Can you check which version are you on?

[classyrancor]

it is React Developer Tools 3.3.0 running on Firefox 61.0.2 (64-bit)

[gaearon]

Any chance you could share a website where I can reliably reproduce it? Didn't manage so far.

[bvaughn]

Also curious if @classyrancor can repro on Chrome by chance?

I don't think I'll have time to look into this in the next few days, unfortunately. I'll assign to myself for when I return next week.

[gaearon]

Sorry @bvaughn, didn't mean to distract you during the time away. Feel free to mute the notifications please. :-)

[classyrancor]

It seems to only happen running locally with a non-production build React app. If I open React Dev Tools on instagram I can browse anywhere and have no issues. Let me try a couple things. Let me build my application and try it on the production build version and also I can try in Chrome. Not sure what the difference would be. Maybe longer non-breaking strings for class names or something?

[gaearon]

Maybe longer non-breaking strings for class names or something?

Sounds likely.

[classyrancor]

This only happens running on the local build. No issue browsing through the production build. I notice a couple things that differ between the builds. The number of displayed components, the length of the displayed component names and the length of the class names.

No issue browsing the non-production build using Chrome.

[gaearon]

If you can reduce the local build example to something you could share that would be helpful.

[classyrancor]

Once I have it compiling again I can see if I can pull out enough of it to exhibit this behavior.

[classyrancor]

With this build if you make the developer console wide enough the right pane will come back in view, but with a reasonably sized console it goes off the page. In any case you can see it bumping over as you go down the DOM tree.

[gaearon]

Awesome. Thanks. We'll try to look next week. If you'd like to take a stab at fixing it, feel free to as well!

[classyrancor]

No problem at all. If i can find some free time I'll take a look.

[bvaughn]

Fixed via #1111