Repair popup presentation positioning

Author: turner

css/_igv-generic-container.scss

@@ -1,11 +1,11 @@
 
 .igv-generic-container {
 
-  position: absolute;
+  position: fixed;
 
-  top: 50%;
+  top: 20%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
 
   z-index: 2048;
 

css/_igv-generic-dialog-container.scss

@@ -32,11 +32,11 @@ $igv-button-width: 75px;
 // generic dialog
 .igv-generic-dialog-container {
 
-  position: absolute;
+  position: fixed;
 
-  top: 50%;
+  top: 20%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
 
   width:300px;
   height:200px;

css/_igv-ui-colorpicker.scss

@@ -4,9 +4,11 @@ $igv-color-swatch-border-width: 2px;
 
 .igv-ui-generic-container {
 
+  position: fixed;
+
+  top: 20%;
   left: 50%;
-  top: 75%;
-  transform: translate(-50%, -25%);
+  transform: translateX(-50%);
 
   flex-direction: column;
   flex-wrap: nowrap;

css/_igv-ui-generic-container.scss

@@ -1,15 +1,20 @@
 
 .igv-ui-generic-container {
 
-  box-sizing: content-box;
+  position: fixed;
+
+  top: 20%;
+  left: 50%;
+  transform: translateX(-50%);
 
-  position: absolute;
   z-index: 2048;
 
   background-color: white;
 
   cursor: pointer;
 
+  box-sizing: content-box;
+
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

css/_igv-ui-generic-dialog-container.scss

@@ -4,11 +4,17 @@
 
   box-sizing: content-box;
 
-  position: absolute;
+  position: fixed;
 
-  top: 50%;
+  top: 20%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
+
+  z-index: 2048;
+
+  background-color: white;
+
+  cursor: pointer;
 
   width:300px;
   height:fit-content;
@@ -23,10 +29,6 @@
   font-size: medium;
   font-weight: 400;
 
-  z-index: 2048;
-
-  background-color: white;
-
   display: flex;
   flex-flow: column;
   flex-wrap: nowrap;