fixed bug where user cannot select comparison box when images and box are the same size

2 files changed, 95 insertions, 86 deletions

diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 5449cd145..f3ad2b8b9 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -3,69 +3,77 @@
     border-radius: inherit;
     width: 100%;
     height: 100%;
+    background-color: grey;
 
-    .clip-div {
+    .content-wrapper {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 50%;
-        height: 100%;
-        overflow: hidden;
-        z-index: 999;
+        bottom: 0;
+        width: 100%;
+        height: 95%;
 
-        .beforeBox-cont {
+        .clip-div {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 50%;
             height: 100%;
-            overflow: auto;
-            background-color: rgb(230, 230, 230);
+            overflow: hidden;
+            z-index: 999;
+
+            .beforeBox-cont {
+                height: 100%;
+                overflow: auto;
+                background-color: rgb(240, 240, 240);
+            }
+
+            .slide-bar {
+                position: absolute;
+                width: 5px;
+                height: 100%;
+                top: 0;
+                right: 0;
+                background-color: grey;
+                cursor: ew-resize;
+            }
         }
 
-        .slide-bar {
+        .afterBox-cont {
             position: absolute;
-            width: 5px;
-            height: 100%;
             top: 0;
             right: 0;
-            background-color: white;
-            cursor: ew-resize;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            background-color: lightgray;
         }
-    }
 
-    .afterBox-cont {
-        position: absolute;
-        top: 0;
-        right: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-        background-color: rgb(200, 200, 200);
-    }
-
-    .clear-button {
-        position: absolute;
-        top: 3px;
-        opacity: 0.8;
-        pointer-events: all;
-        cursor: pointer;
-    }
+        .clear-button {
+            position: absolute;
+            top: 3px;
+            opacity: 0.8;
+            pointer-events: all;
+            cursor: pointer;
+        }
 
-    .clear-button.before {
-        left: 3px;
-    }
+        .clear-button.before {
+            left: 3px;
+        }
 
-    .clear-button.after {
-        right: 3px;
-    }
+        .clear-button.after {
+            right: 3px;
+        }
 
-    .placeholder {
-        width: 50%;
-        height: 50%;
-        margin-top: 25%;
-        margin-left: 25%;
+        .placeholder {
+            width: 50%;
+            height: 50%;
+            margin-top: 25%;
+            margin-left: 25%;
 
-        .upload-icon {
-            width: 100%;
-            height: 100%;
-            opacity: 0.5;
+            .upload-icon {
+                width: 100%;
+                height: 100%;
+                opacity: 0.5;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index e8368e12d..6968d5a88 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -7,9 +7,8 @@ import { observer } from "mobx-react";
 import { Doc } from '../../../new_fields/Doc';
 import { documentSchema } from '../../../new_fields/documentSchemas';
 import { Id } from '../../../new_fields/FieldSymbols';
-import { createSchema, listSpec, makeInterface } from '../../../new_fields/Schema';
-import { ComputedField } from '../../../new_fields/ScriptField';
-import { Cast, NumCast, StrCast } from '../../../new_fields/Types';
+import { createSchema, makeInterface } from '../../../new_fields/Schema';
+import { NumCast, StrCast } from '../../../new_fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
@@ -108,24 +107,50 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         const clipWidth = this.props.Document.clipWidth as Number;
         return (
             <div className="comparisonBox">
-                {/* wraps around before image and slider bar */}
-                <div className="clip-div" style={{ width: clipWidth + "px" }}>
+                <div className="content-wrapper">
+                    <div className="clip-div" style={{ width: clipWidth + "px" }}>
+                        {/* wraps around before image and slider bar */}
+                        <div
+                            className="beforeBox-cont"
+                            key={this.props.Document[Id]}
+                            ref={(ele) => {
+                                this._beforeDropDisposer && this._beforeDropDisposer();
+                                this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
+                            }}
+                            style={{ width: this.props.PanelWidth() }}>
+                            {
+                                beforeDoc ?
+                                    <>
+                                        <ContentFittingDocumentView {...this.props}
+                                            Document={beforeDoc}
+                                            getTransform={this.props.ScreenToLocalTransform} />
+                                        <div className="clear-button before" onClick={(e) => this.clearBeforeDoc(e)}>
+                                            <FontAwesomeIcon className="clear-button before" icon={faTimes} size="sm" />
+                                        </div>
+                                    </>
+                                    :
+                                    <div className="placeholder">
+                                        <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
+                                    </div>
+                            }
+                        </div>
+                        <div className="slide-bar" onPointerDown={e => this.registerSliding(e)} />
+                    </div>
                     <div
-                        className="beforeBox-cont"
+                        className="afterBox-cont"
                         key={this.props.Document[Id]}
                         ref={(ele) => {
-                            this._beforeDropDisposer && this._beforeDropDisposer();
-                            this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
-                        }}
-                        style={{ width: this.props.PanelWidth() }}>
+                            this._afterDropDisposer && this._afterDropDisposer();
+                            this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
+                        }}>
                         {
-                            beforeDoc ?
+                            afterDoc ?
                                 <>
                                     <ContentFittingDocumentView {...this.props}
-                                        Document={beforeDoc}
+                                        Document={afterDoc}
                                         getTransform={this.props.ScreenToLocalTransform} />
-                                    <div className="clear-button before" onClick={(e) => this.clearBeforeDoc(e)}>
-                                        <FontAwesomeIcon className="clear-button before" icon={faTimes} size="sm" />
+                                    <div className="clear-button after" onClick={(e) => this.clearAfterDoc(e)}>
+                                        <FontAwesomeIcon className="clear-button after" icon={faTimes} size="sm" />
                                     </div>
                                 </>
                                 :
@@ -134,30 +159,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                                 </div>
                         }
                     </div>
-                    <div className="slide-bar" onPointerDown={e => this.registerSliding(e)} />
-                </div>
-                <div
-                    className="afterBox-cont"
-                    key={this.props.Document[Id]}
-                    ref={(ele) => {
-                        this._afterDropDisposer && this._afterDropDisposer();
-                        this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
-                    }}>
-                    {
-                        afterDoc ?
-                            <>
-                                <ContentFittingDocumentView {...this.props}
-                                    Document={afterDoc}
-                                    getTransform={this.props.ScreenToLocalTransform} />
-                                <div className="clear-button after" onClick={(e) => this.clearAfterDoc(e)}>
-                                    <FontAwesomeIcon className="clear-button after" icon={faTimes} size="sm" />
-                                </div>
-                            </>
-                            :
-                            <div className="placeholder">
-                                <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
-                            </div>
-                    }
                 </div>
             </div >);
     }