Review modal usage

[fregante]

Our modals have a couple of issues/inconsistencies:

• some modals don't appear in the top layer
  • [ ] https://github.com/pixiebrix/pixiebrix-extension/issues/8029
• sometimes the modal is part of a component
  • [ ] we should probably always have a standalone version of a component, so that it can appear in storybook without complications
• sometimes we use dialog, sometimes we use bootstrap's modal. Also mentioned by Graham
  • [ ] we should standardize our own dialog-based component since we're stuck on bootstrap 4
• sometimes we create them via document.createElement
  • [ ] Not a big deal, but maybe we can reduce our "raw DOM" usage by having a single Modal component
• sometimes they're inside the iframe'd element, sometimes the iframe is in the modal body
  • [ ] I think this is the worst UX offender, because if the iframe is broken/not-connected, then the user won't be able to remove the iframe and close the modal

Related, might follow:

• https://github.com/pixiebrix/pixiebrix-extension/issues/7670