Make spreadsheets fullscreen

Spreadsheets from multiple sessions need to be redesigned to perhaps use tabs or split windows or something else

src/bonsai/bonsai/bim/data/webui/static/css/index.css

@@ -57,11 +57,9 @@ body {
 }
 
 #container {
+    position: relative;
+    padding: var(--margin-small);
     flex: 1;
-    margin-top: var(--margin-medium);
-    margin-left: var(--margin-small);
-    margin-right: var(--margin-small);
-    margin-bottom: var(--margin-medium);
 }
 
 h3 {
@@ -204,7 +202,11 @@ footer p {
 }
 
 .table-container {
-    margin-bottom: var(--margin-large);
+    position: absolute;
+    display: block;
+    height: calc(100% - var(--margin-small) * 2);
+    width: calc(100% - var(--margin-small) * 2);
+    overflow-x: scroll;
 }
 
 .csv-table {
@@ -297,4 +299,4 @@ button:hover {
 
 .tabulator-menu-item:hover {
     filter: brightness(1.4);
-}
+}

src/bonsai/bonsai/bim/data/webui/static/js/index.js

@@ -206,16 +206,19 @@ function addTableElement(blenderId, csvData, filename) {
     return menu;
   }
 
+  var containerHeight=$('.table-container').height();
+  var h3Height=$('.table-container>h3').height();
   var table = new Tabulator("#table-" + blenderId, {
     placeholder: "No data to display",
-    height: "400px",
     resizableColumnGuide: true,
     index: "GlobalId",
     data: csvData,
     importFormat: "csv",
     autoColumns: true,
     selectableRows: 1,
-    layout: "fitColumns",
+    layout: "fitDataFill",
+    height: containerHeight - h3Height - 20 + "px",
+    movableColumns: true,
     // Our fields are never nested, and we use the "." character in queries
     nestedFieldSeparator: false,
     autoColumnsDefinitions: function (definitions) {