The way I avoided this when doing the selection/focus CSS in my b236d84f070ae96280973b3cceb57a0d8a025091 was to use the outline instead. Wherever I wanted a 1px->2px border, I used a 1px border and a 0px->1px outline.
This should also be moved to CSS to separate concerns. Modifying the DOM directly is not preferred in React.
The text and the icons inside the node should not shift when showing the dragged nodes interactivity animation. This is from #139.
https://github.com/SEG491X-W2023-T42/mikado-machine/assets/25646384/63d54cbc-a21d-4719-9dcf-fceb0b22a365
The way I avoided this when doing the selection/focus CSS in my b236d84f070ae96280973b3cceb57a0d8a025091 was to use the outline instead. Wherever I wanted a 1px->2px border, I used a 1px border and a 0px->1px outline.
This should also be moved to CSS to separate concerns. Modifying the DOM directly is not preferred in React.