[react-devtools] Enable to display Long interaction names(#16736)

[toshi1127]

issues: #16736

fixed long interaction names displayable.

[toshi1127]

I have completed the Contributor License Agreement.

[sizebot]

No significant bundle size changes to report.

Generated by 🚫 dangerJS against ce20e83

[lekterable]

Hey @toshi1127 , huge thanks for your contribution, but if you could next time let know in the thread that you're taking the issue it will save us the unnecessary confusion. @varenaggarwal might've started to work on it as well, as it didn't look taken.

[toshi1127]

@lekterable
I'm sorry, that's true.
As a precaution, I posted that I worked on the issue.

[erasmuswill]

Looks good to me!

[souravbadami]

Why is this pending? Is something left out?
Please let me know. I was going through the list of issues and found this.

[bvaughn]

Thank you for opening a PR!

I don't think horizontally scrolling text is a very user friendly interface though. I think adding a tooltip (via a title attribute) to the sidebar is a sufficient change. (One was already added to the main list item.)

You can also triple click the interaction name to select it all (despite the truncation ellipsis).

I'll make sure the new tooltip gets added (via PR #17689).