BUG: DialogToggleButton should use portal

[tillprochaska]

Describe the bug
The dialog is currently rendered as a sibling element to the toggle button. When enclosing the toggle button in a popover target (e.g. in order to display a tooltip), the target will be active as long as the dialog is open. Using a portal solves this.

To Reproduce
Steps to reproduce the behavior:

1. Create a network diagram.
2. Open the network diagram.
3. Click on the settings icon in the top right corner.
4. The settings dialog will be open. The tooltip stays visible.

Expected behavior
The tooltip should only be visible while the button is active and should be hidden once the dialog opens.

Aleph version
3.12.7

Screenshots
-/-

Additional context
-/-

[tillprochaska]

Note to myself: We’re actually already rendering most modals in portals. However, while portal are rendered in a different part of the DOM tree, they exist in the same position in the React component tree and synthetic events bubble along the React component tree, not the DOM tree.

facebook/react#11387

[tillprochaska]

Closing this as fixing it is probably not worth the effort. May revisit it when we’ve converted a larger part of the app to functional components (as hooks may be a better way of sharing the boilerplate to handle dialog states without enforcing the button and dialog components both being part of the same component subtree.)