css, builder.js shaping up the annotations

Annotations now display two lines by default and do not displace other elements when being expanded

browser/css/dark.css

@@ -1621,11 +1621,19 @@ table.log textarea {
   overflow-wrap: break-word;
   overflow-y: hidden;
   max-width: 457px;
-  min-height: 17px;
-  height: 17px;
+  min-height: 32px;
+  max-height: 32px;
+  position: fixed;
+  width: 100%;
+  background-color: #000000;
+  -webkit-transition: max-height 0.8s;
+  -moz-transition: max-height 0.8s;
+  transition: max-height 0.8s;
+  z-index: 0;
 }
 .info_container:hover {
-  height: auto;
+  max-height: 400px;
+  z-index: 1;
 }
 .patient_info_text {
   margin-bottom: 5px;
@@ -1634,9 +1642,8 @@ textarea#edit_value {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  display: block;
   width: 100%;
-  min-height: 50px;
+  min-height: 45px;
 }
 #top_info {
   display: inline-flex;
@@ -1650,3 +1657,6 @@ textarea#edit_value {
   margin-top: 5px;
   margin-bottom: 5px;
 }
+.locus_line {
+  margin-top: 44px;
+}

browser/css/light.css

@@ -1621,11 +1621,19 @@ table.log textarea {
   overflow-wrap: break-word;
   overflow-y: hidden;
   max-width: 457px;
-  min-height: 17px;
-  height: 17px;
+  min-height: 32px;
+  max-height: 32px;
+  position: fixed;
+  width: 100%;
+  background-color: #ffffff;
+  -webkit-transition: max-height 0.8s;
+  -moz-transition: max-height 0.8s;
+  transition: max-height 0.8s;
+  z-index: 0;
 }
 .info_container:hover {
-  height: auto;
+  max-height: 400px;
+  z-index: 1;
 }
 .patient_info_text {
   margin-bottom: 5px;
@@ -1634,9 +1642,8 @@ textarea#edit_value {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  display: block;
   width: 100%;
-  min-height: 50px;
+  min-height: 45px;
 }
 #top_info {
   display: inline-flex;
@@ -1650,3 +1657,6 @@ textarea#edit_value {
   margin-top: 5px;
   margin-bottom: 5px;
 }
+.locus_line {
+  margin-top: 44px;
+}

browser/css/vidjil.less

@@ -2,6 +2,8 @@
 /* base Vidjil style */
 /* @default, @background, @highlight, @select, @secondary and @border have to be defined */
 
+@infoContainerHeight : 32px;
+@locusSpacingMargin : 12px;
 
 /* default tag color */
 @tagColor0 : #DC322F;
@@ -1842,12 +1844,20 @@ flex-grow : 1;
     overflow-wrap: break-word;
     overflow-y: hidden;
     max-width: 457px;
-    min-height: 17px;
-    height: 17px;
+    min-height: @infoContainerHeight;
+    max-height: @infoContainerHeight;
+    position: fixed;
+    width: 100%;
+    background-color: @background;
+    -webkit-transition: max-height 0.8s;
+    -moz-transition: max-height 0.8s;
+    transition: max-height 0.8s;
+    z-index: 0;
 }
 
 .info_container:hover {
-    height: auto;
+    max-height: 400px;
+    z-index: 1;
 }
 
 .patient_info_text {
@@ -1858,9 +1868,9 @@ textarea#edit_value {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    display:block;
+    //display:block;
     width: 100%;
-    min-height: 50px;
+    min-height: 45px;
 }
 
 #top_info {
@@ -1877,3 +1887,7 @@ textarea#edit_value {
     margin-top: 5px;
     margin-bottom: 5px;
 }
+
+.locus_line {
+    margin-top: @infoContainerHeight + @locusSpacingMargin;
+}

browser/js/builder.js

@@ -643,7 +643,7 @@ Builder.prototype = {
 
     build_multi_system: function () {
         var div = document.createElement('div');
-        div.className = "info_line";
+        div.className = "info_line locus_line";
         
         var span1 = document.createElement('span');
         span1.appendChild(document.createTextNode("locus"));