1 files changed, 5 insertions, 19 deletions
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 7a4d40db1..d52ba9896 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -34,7 +34,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
 
     private _beforeDropDisposer?: DragManager.DragDropDisposer;
     private _afterDropDisposer?: DragManager.DragDropDisposer;
-    private resizeUpdater: Lambda | undefined;
 
     protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => {
         if (ele) {
@@ -52,32 +51,19 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         }
     }
 
-    componentWillMount() {
-        this.dataDoc.clipWidth = this.props.PanelWidth() / 2;
-
-        //preserve before/after ratio during resizing
-        this.resizeUpdater = computed(() => this.props.PanelWidth()).observe(({ oldValue, newValue }) =>
-            this.dataDoc.clipWidth = NumCast(this.dataDoc.clipWidth) / (oldValue || 0) * newValue
-        );
-    }
-
-    componentWillUnmount() {
-        this.resizeUpdater?.();
-    }
-
     private registerSliding = (e: React.PointerEvent<HTMLDivElement>, targetWidth: number) => {
         setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => {
             this._animating = true;
-            this.dataDoc.clipWidth = targetWidth;
+            this.dataDoc.clipWidth = targetWidth * 100 / this.props.PanelWidth();
             setTimeout(action(() => this._animating = false), 1000);
         }), false);
     }
 
     @action
     private onPointerMove = ({ movementX }: PointerEvent) => {
-        const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth);
+        const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth) / 100 * this.props.PanelWidth();
         if (width && width > 5 && width < this.props.PanelWidth()) {
-            this.dataDoc.clipWidth = width;
+            this.dataDoc.clipWidth = width * 100 / this.props.PanelWidth();
         }
         return false;
     }
@@ -115,7 +101,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                             <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
                         </div>}
                 </div>
-                <div className="clip-div" onPointerDown={e => this.registerSliding(e, 5)} style={{ width: clipWidth + "px", transition: this._animating ? "all 1s" : undefined }}>
+                <div className="clip-div" onPointerDown={e => this.registerSliding(e, 5)} style={{ width: clipWidth + "%", transition: this._animating ? "all 1s" : undefined }}>
                     {/* wraps around before image and slider bar */}
                     <div
                         className="beforeBox-cont"
@@ -144,7 +130,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                     </div>
                 </div>
 
-                <div className="slide-bar" style={{ left: `calc(${NumCast(this.dataDoc.clipWidth) * 100 / this.props.PanelWidth()}% - 0.5px)` }}>
+                <div className="slide-bar" style={{ left: `calc(${this.dataDoc.clipWidth}% - 0.5px)` }}>
                     <div className="slide-handle" />
                 </div>
             </div >);