Reposition the TwoUp handle on resize

src/components/Output/custom-els/TwoUp/index.ts

@@ -37,6 +37,10 @@ export default class TwoUp extends HTMLElement {
     new MutationObserver(() => this._childrenChange())
       .observe(this, { childList: true });
 
+    // Watch for element size changes.
+    new ResizeObserver(() => this._resetPosition())
+      .observe(this);
+
     // Watch for pointers on the handle.
     const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
       start: (_, event) => {
@@ -57,7 +61,7 @@ export default class TwoUp extends HTMLElement {
 
   connectedCallback() {
     this._handle.innerHTML = `<div class="${styles.scrubber}">${
-      `<svg viewBox="0 0 20 10" fill="currentColor"><path d="M8 0v10L0 5zM12 0v10l8-5z"/></svg>`
+      '<svg viewBox="0 0 20 10" fill="currentColor"><path d="M8 0v10L0 5zM12 0v10l8-5z"/></svg>'
     }</div>`;
 
     this._childrenChange();

src/components/Output/custom-els/TwoUp/missing-types.d.ts

@@ -19,3 +19,36 @@ declare namespace JSX {
     'two-up': TwoUpAttributes;
   }
 }
+
+interface DOMRectReadOnly {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+  readonly top: number;
+  readonly right: number;
+  readonly bottom: number;
+  readonly left: number;
+}
+
+declare global {
+  interface ResizeObserverCallback {
+    (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
+  }
+
+  interface ResizeObserverEntry {
+    readonly target: Element;
+    readonly contentRect: DOMRectReadOnly;
+  }
+
+  interface ResizeObserver {
+    observe(target: Element): void;
+    unobserve(target: Element): void;
+    disconnect(): void;
+  }
+}
+
+declare var ResizeObserver: {
+  prototype: ResizeObserver;
+  new(callback: ResizeObserverCallback): ResizeObserver;
+};