Fix settings pullup for model3D files on mobile (#222)

* Fix: Settings pullup fits on mobile

* Fix: Fix inputs in the Model3DPullup

* Chore: Responding to comments

src/lib/Controls.js

@@ -172,8 +172,7 @@ class Controls {
      * @param {Event} event - A DOM-normalized event object.
      * @return {void}
      */
-    clickHandler = (event) => {
-        event.preventDefault();
+    clickHandler = () => {
         // If we are not focused in on the page num input, allow hiding after timeout
         this.shouldHide = true;
     };

src/lib/__tests__/Controls-test.js

@@ -252,15 +252,6 @@ describe('lib/Controls', () => {
     });
 
     describe('clickHandler()', () => {
-        const event = {
-            preventDefault: sandbox.stub()
-        };
-
-        it('should prevent default', () => {
-            controls.clickHandler(event);
-            expect(event.preventDefault).to.be.called;
-        });
-
         it('should stop block hiding', () => {
             controls.clickHandler(event);
             expect(controls.shouldHide).to.be.true;

src/lib/viewers/box3d/Box3DControls.js

@@ -3,6 +3,7 @@ import autobind from 'autobind-decorator';
 import Controls from '../../Controls';
 import { EVENT_RESET, EVENT_SCENE_LOADED, EVENT_TOGGLE_FULLSCREEN, EVENT_TOGGLE_VR } from './box3DConstants';
 import { ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, ICON_3D_VR } from '../../icons/icons';
+import './Box3DControls.scss';
 
 import { CLASS_HIDDEN } from '../../constants';
 import { UIRegistry } from './Box3DUIUtils';

src/lib/viewers/box3d/Box3DControls.scss

@@ -0,0 +1,15 @@
+$compact-width: 375px;
+$compact-height: 550px;
+
+@media (max-width: $compact-width) {
+    .bp-box3d .bp-pullup {
+        right: 0;
+    }
+}
+
+@media (max-height: $compact-height) {
+    .bp-box3d .bp-pullup {
+        height: 250px;
+        overflow: scroll;
+    }
+}

src/lib/viewers/box3d/model3d/Model3D.scss

@@ -17,7 +17,7 @@ $arrow-top-bottom: 4px solid transparent;
     }
 
     .bp-pullup {
-        bottom: calc(100%);
+        bottom: 100%;
         padding: 0 10px 20px;
         text-align: left;
     }