table display changed into flex display

frontend-js/src/main/css/global.css

@@ -379,13 +379,12 @@ table.minerva-window-drug-table td {
 }
 
 .minerva-root {
-    display: table;
+    display: flex;
     width: 100%;
     height: 100%;
 }
 
 .minerva-left-panel {
-    display: table-cell;
     position: relative;
     float: left;
     border: none;
@@ -407,7 +406,6 @@ table.minerva-window-drug-table td {
 }
 
 .minerva-middle-panel {
-    display: table-cell;
     height: 100%;
     width: 100%;
 }
@@ -422,14 +420,12 @@ table.minerva-window-drug-table td {
     width: 5px;
     height: 100%;
     clear: both;
-    display: table-cell;
     vertical-align: top;
     border-left: 1px dotted gray;
     cursor: col-resize;
 }
 
 .minerva-plugin {
-    display: table-cell;
 }
 
 .minerva-annotation-row-odd {

frontend-js/src/main/js/minerva.js

@@ -170,13 +170,13 @@ function createDivStructure(element) {
     className: "minerva-plugin-split-bar",
     content: "&nbsp"
   });
-  element.appendChild(splitBar);
+  tableDiv.appendChild(splitBar);
 
   var rightPanelDiv = functions.createElement({
     type: "div",
     className: "minerva-plugin"
   });
-  element.appendChild(rightPanelDiv);
+  tableDiv.appendChild(rightPanelDiv);
 
   var menuDiv = functions.createElement({
     type: "div",
@@ -270,7 +270,7 @@ function assignSplitBarHandler(customMap, pluginManager) {
     e.preventDefault();
     //TODO should use global size (but element size)
     var x = $("body").width() - e.pageX;
-    $(rightPanelDiv).css("width", x);
+    $(rightPanelDiv).css("flex", "0 0 " + x + "px");
     customMap.getMapCanvas().triggerListeners('resize');
     return pluginManager.callListeners("onResize");
   };