Styling updates to prevent lesion dialogs from going off screen

Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.js

@@ -76,6 +76,14 @@ function getLesionLocationCallback(measurementData, eventData) {
         display: 'block'
     };
 
+    var pageHeight = $(window).height();
+    dialogProperty.top = Math.max(dialogProperty.top, 0);
+    dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight());
+
+    var pageWidth = $(window).width();
+    dialogProperty.left = Math.max(dialogProperty.left, 0);
+    dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth());
+
     // Device is touch device or not
     // If device is touch device, set position center of screen vertically and horizontally
     if (isTouchDevice()) {

Packages/lesiontracker/client/components/lesionLocationDialog/lesionLocationDialog.styl

@@ -7,18 +7,11 @@
   right: 0
   z-index: 100
   width: 300px
-  margin: auto
+  height: 130px
   border-radius: 5px
   padding: 10px 20px 10px 20px
   background-color: rgba(255,255,255,1)
 
-  /* dialogMobile is added to #lesionLocationDialog when touchDevices is detected */
-  .dialogMobile
-    margin: 0 auto
-    float: none
-    background-color: rgba(0,0,0,0.5)
-    text-align: center
-
   #closeLesionPopup
     outline: none
     border: none