Fix race condition with HTML plots loading in auxiliary windows (#10586)

Addresses #10512 again, following up to
#10562

I was going to do this next week, but I think I found where this was
going wrong! Like @jmcphers hypothesized, we had a race condition where
the webview layout was sometimes calculated before the DOM element had
its final dimensions. The layout `useEffect` ran on every render without
proper dependencies, calling `layoutWebviewOverElement()` before the
element was fully laid out in the DOM. This was especially problematic
in auxiliary windows where the rendering pipeline can be slightly
delayed or out of sync.

I replaced the eager layout call with a `ResizeObserver` that waits for
the element to have non-zero dimensions before calculating position.
Hopefully this means the webview is always positioned correctly on first
render. 🤞 I was only seeing this in about 1 out of 20 loads of the
auxiliary window, so it will definitely be good to run this a BUNCH of
times to see if you ever see the bad behavior now.

@:plots

### Release Notes

<!--
Optionally, replace `N/A` with text to be included in the next release
notes.
The `N/A` bullets are ignored. If you refer to one or more Positron
issues,
these issues are used to collect information about the feature or
bugfix, such
as the relevant language pack as determined by Github labels of type
`lang: `.
  The note will automatically be tagged with the language.

These notes are typically filled by the Positron team. If you are an
external
  contributor, you may ignore this section.
-->

#### New Features

- N/A

#### Bug Fixes

- N/A


### QA Notes

I'm going to copy from #10562:

-----

Some R plots:

```r
# Interactive ------------------------------------------------------------
library(highcharter)
hchart(mtcars, "scatter", hcaes(wt, mpg, z = drat, color = hp)) |>
  hc_title(text = "Scatter chart with size and color")

# Static -----------------------------------------------------------------
plot(faithful)

# Static -----------------------------------------------------------------
plot(sample(1:100, 20))

# Interactive ------------------------------------------------------------
library(ggplot2)
library(plotly)
p <- ggplot(data = diamonds, aes(x = cut, fill = clarity)) +
            geom_bar(position = "dodge")
ggplotly(p)
```

Some Python plots:

```python
import numpy as np
import pandas as pd

df = pd.DataFrame(np.random.randint(1, 7, 6000), columns=["one"])
df["two"] = df["one"] + np.random.randint(1, 7, 6000)

# make one plot
df.plot.hist(bins=12, alpha=0.5)

# make a new plot with fewer bins
df.plot.hist(bins=8, alpha=0.5)
```

- You should be able to create some of these plots (perhaps intermixed R
and Python) and then pop out the new auxiliary window, with the
interactive/HTML plots correctly showing up in the new auxiliary window.
- You should also be able to make new interactive and static plots and
have them show up in that window, if it is open.
- You should be able to close the auxiliary window and have everything
come back to the main window plots pane.

Author: juliasilge

src/vs/workbench/contrib/positronPlots/browser/components/webviewPlotInstance.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 // React.
-import React, { useEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 
 // Other dependencies.
 import { WebviewPlotClient } from '../webviewPlotClient.js';
@@ -48,21 +48,35 @@ export const WebviewPlotInstance = (props: WebviewPlotInstanceProps) => {
 		};
 	}, [props.plotClient, props.visible]);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		// If the client is not claimed, do nothing.
 		// This is to avoid activating the client when it isn't claimed, which could happen
 		// if the previous effect is cleaned up before this one runs.
-		if (!clientIsClaimed) {
+		if (!clientIsClaimed || !webviewRef.current) {
 			return;
 		}
 
 		const client = props.plotClient;
-		client.activate().then(() => {
-			if (webviewRef.current) {
-				client.layoutWebviewOverElement(webviewRef.current);
+		const element = webviewRef.current;
+
+		// Use ResizeObserver to detect when the element gets dimensions.
+		// This is especially important in auxiliary windows where the element
+		// might not have its final dimensions immediately after mounting.
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				// Only layout if the element has non-zero dimensions
+				if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+					client.layoutWebviewOverElement(element);
+				}
 			}
 		});
-	});
+
+		resizeObserver.observe(element);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [clientIsClaimed, props.plotClient]);
 
 	const style = {
 		width: `${props.width}px`,