React-devtools: Maybe needs add horizontal scroll?

[inoyakaigor]

Browser: any
Ver.: 3.4.3

I have a deep nested components structure and while inspecting the deepest of it I see this:

May be add horizontal scroll?

[bvaughn]

There is already a horizontal scroll for the elements panel. The thing you're pointing out (I think) is that the min-width before wrapping for any given node is pretty narrow.

I think this is a tricky balance, because making that width too wide can also make things hard to read (when you have to scroll left and right a lot to see the full element).

My gut tells me that the current layout is probably a reasonable compromise, although I agree with you that it's not ideal in all cases (like the one you are pointing out here). If you'd like to share a PR with a proposal for changing the layout, I'd be happy to test it and give you feedback. I did try out a few before landing on this one, for what it's worth, but maybe I overlooked something. 😄

For now I'm going to close this issue because I don't think we plan on taking any action on it.

[ThiefMaster]

Any chance this can be improved? Currently devtools are pretty much unusable for deeply nested elements because of this.

[ackmanx]

It has hard to understand how @ThiefMaster screenshot example is the intended behavior. I also suffer from this because it's insanely unreadable, and my company uses styled components and context providers so the tree is deeply nested very quickly.

[bvaughn]

This behavior is gone in DevTools v4 which should be releasing very soon (perhaps this week).

Changelog if you are interested:
https://github.com/bvaughn/react-devtools-experimental/blob/master/CHANGELOG.md

Installation instructions if you'd like to try the beta:
https://github.com/bvaughn/react-devtools-experimental#installation