diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts
index 53966c0a..034a6429 100644
--- a/src/components/Output/custom-els/TwoUp/index.ts
+++ b/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 = `
`;
this._childrenChange();
diff --git a/src/components/Output/custom-els/TwoUp/missing-types.d.ts b/src/components/Output/custom-els/TwoUp/missing-types.d.ts
index fde547bd..d2f9c994 100644
--- a/src/components/Output/custom-els/TwoUp/missing-types.d.ts
+++ b/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;
+};