Fixes CRConnect #414 and #415

makes script editor wider; makes font/style more legible; makes dropdown script list opaque. noted limitations: (1) it is a PITA to get script editor to resize out to the left, so i just made it a big bigger overall; (2) the script list is stupid long now but it is a PITA to put a scrollbar on the menu and preserve the popout elements. I included a stackoverflow link in there in case its something to add in the future though

assets/diagram-js-code-editor.css

@@ -16,6 +16,15 @@ border-radius: 2px;
 box-sizing: border-box;
 }
 
+.ace_editor {
+    position: absolute;
+    bottom: 0;
+    right: 8px;
+    display: block;
+    font-size: 14px;
+    font-weight: lighter;
+}
+
 /*Toggle*/
 .djs-editor:not(.enabled) {
 color: #CCC; /*Grayed Out*/
@@ -102,7 +111,8 @@ color: blue;
 /*Ide*/
 
 .djs-editor.open .ide {
-display: block;
+    width: 600px;
+    display: block;
 }
 
 .djs-editor .ide {
@@ -114,12 +124,22 @@ height: 280px;
 
 .dropdown-menu {
 height: auto;
-max-height: 200px;
     overflow-scrolling: auto;
     /*overflow-y: scroll;*/
     /*overflow-x: hidden;*/
 }
 
+.dropdown-menu.show {
+    /*
+     See - https://stackoverflow.com/questions/3550795/is-it-possible-to-have-a-popup-div-that-breaks-out-of-an-overflowscroll-or-ov
+     for limitations on having a popout element from a scroll menu.
+     in the future, this could be updated to calculate the position of the
+     popout element in JS.
+     */
+    /* overflow-x: hidden;
+    overflow-y: auto; */
+}
+
 .djs-editor:not(.open) .toggle {
 width: 46px;
 height: 46px;
@@ -160,7 +180,7 @@ background:rgba(200,100,100,0.5);
 z-index:3;
 }
 
-.dropdown-menu li{ position: relative; 	}
+.dropdown-menu li{ }
 .nav-item .submenu{
 display: none;
 position: absolute;
@@ -170,4 +190,4 @@ left:100%; top:-7px;
 right:100%; left:auto;
 }
 .dropdown-menu > li:hover { background-color: #f1f1f1 }
-.dropdown-menu > li:hover > .submenu{ display: block; }
+.dropdown-menu > li:hover > .submenu{ position: absolute; display: block; }