Selection box not extending wide enough for deeply nested nodes

[larsblumberg]

trafficstars

Content of screenshot created from the linked online demo.

[jameskerr]

Interesting, I wonder what the correct UX for this would be. I'll look at some other tree examples and see what they do.

[Technologeek]

@jameskerr I was going to dig into this but was unable to reproduce it. If you can tell me how to reproduce this I'll look into the alternative UI's.

[larsblumberg]

I run the demo at https://react-arborist.netlify.app/ and did what any programmer would do: nesting all folders into each other :) "Achieved" on Firefox 96 on Pop_OS! 21.04 (corresponds to Ubuntu 21.04)

[jameskerr]

Aww, I see. This is a bug in the row css.

When you created deeply nested nodes, the container starts to scroll horizontally. width: 100% does not account for this scroll it seems.

@Technologeek if you want to put up a fix, it looks like the node inline styles need to include "min-width: max-content". that seemed to fix this issue.

Before:

Fix:

After:

Here's the line of code where that "min-width: max-content" should go: https://github.com/brimdata/react-arborist/blob/bbbe4d64159e5c62201c0167565d864e584ffd69/packages/react-arborist/src/components/row.tsx#L68

[Technologeek]

@jameskerr Assign this to me please! Thanks!