Use graphics element, not container element for resize listener

The best explanation is this loom:

https://www.loom.com/share/a123d237c47b476db00bc79a0aee0bb8

Author: jcmorrow

src/ui/components/Video/RecordedCursor.tsx

@@ -27,14 +27,14 @@ export function RecordedCursor() {
           const originalHeight = height / localScale;
           const originalWidth = width / localScale;
 
-          const mouseX = (mouseEvent.clientX / originalWidth) * width;
-          const mouseY = (mouseEvent.clientY / originalHeight) * height;
+          const mouseX = (mouseEvent.clientX / originalWidth) * 100;
+          const mouseY = (mouseEvent.clientY / originalHeight) * 100;
 
           const cursorScale = Math.min(1, Math.max(0.25, localScale * recordingScale));
 
           element.style.display = "block";
-          element.style.left = `${mouseX}px`;
-          element.style.top = `${mouseY}px`;
+          element.style.left = `${mouseX}%`;
+          element.style.top = `${mouseY}%`;
           element.style.transform = `scale(${cursorScale})`;
           element.style.setProperty("--click-display", shouldDrawClick ? "block" : "none");
         } else {

src/ui/components/Video/imperative/subscribeToMutableSources.ts

@@ -35,7 +35,7 @@ export function subscribeToMutableSources({
     });
 
     // When the graphics element resizes, the mutable state should recalculate the its layout
-    updateState(containerElement, { didResize: true });
+    updateState(graphicsElement, { didResize: true });
   });
 
   resizeObserver.observe(containerElement);