fix(toolbar): Fix tooltip & hovercard & menu react-portal rendering inside the toolbar

[ryan953]

What you can barely see here is a css change in the before & after shots.

In the before there's no css applied. After there is some css (but z-index is too small, that's fixed in 37a40c6 in this PR)
What's happening?

We are importing a component that eventually calls, in the before case: createPortal(..., document.body). The trouble with that is where the import happens. In the website codebase we import it and the whole react tree, including emotion css, is inside of document.

But in this case we're importing it into toolbar code, so the react root starts inside our ShadowRoot reference instead of document.body. All our toolbar css is inside the shadowroot too, so when we use emotion and generate a className like sentry-devtools-b0afu4 nodes mounted at document won't be able to access it.

TL/DR: the portal target inside the toolbar needs to match with this snippet, using the same container value:

sentry/static/app/components/devtoolbar/components/providers.tsx

Lines 23 to 34 in 6bb4638

	const myCache = useMemo(
	() =>
	createCache({
	key: 'sentry-devtools',
	stylisPlugins: [
	/* your plugins here */
	],
	container,
	prepend: false,
	}),
	[container]
	);

, but only while we're developing inside sentry, and sharing components fully like this.

Before

After

[codecov]

Bundle Report

Changes will increase total bundle size by 3.59kB ⬆️

Bundle name	Size	Change
app-webpack-bundle-array-push	28.18MB	3.59kB ⬆️

[sentry-io]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ Error: Target container is not a DOM element. /replays/5892066ad3f24343bf8cce28d00f93ad View Issue
• ‼️ Error: Target container is not a DOM element. /replays/5892066ad3f24343bf8cce28d00f93ad View Issue
• ‼️ Error: Target container is not a DOM element. /replays/:replaySlug/ View Issue
• ‼️ Error: Target container is not a DOM element. /replays/:replaySlug/ View Issue
• ‼️ Error: Target container is not a DOM element. /replays/:replaySlug/ View Issue

_{Did you find this useful? React with a 👍 or 👎}

[getsentry-bot]

PR reverted: ce3031a