Having written this component, I'm happy to take on the fix for it at some point.
I think the cause of this problem is that wrapping the entire component in a Link component or anchor element is causing the odd alignment issue given how complex the nested content is. I remember fiddling with this for a long time and I am not confident it can handled cleanly in a cross-browser way. It would probably be easier to get consistent alignment if the component used a tags internally.
Unfortunately the a tags are typically React Router "Link" instances, and when I built the ExpandablePath component I did not want to couple it to React Router - especially since it would create a JDL -> react-router dependency.
However I think there be a better way to address this issue that still decouples it from React Router. Basically we could pass a "linkElement" prop inside that is the link element (either a React Router link, or a simple anchor element) that is cloned appropriately for each of the child elements.
Any thoughts sophistifunk?