Improve flexbox css, table footer stays at the bottom

Signed-off-by: Carlos Martín <[email protected]>

Author: carlosms

frontend/src/components/ResultsTable.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
+import './ResultsTable.less';
 
 class ResultsTable extends Component {
   render() {

frontend/src/components/ResultsTable.less

@@ -0,0 +1,9 @@
+.results-table {
+    flex-grow: 1;
+    flex-basis: 150px;
+    min-height: 150px;
+
+    .rt-tr-group {
+        flex: 0 0 auto !important;
+    }
+}

frontend/src/components/TabbedResults.less

@@ -9,26 +9,19 @@
 }
 
 .tab-content {
-    flex: auto 1;
+    flex: 1 1 auto;
 
     display: flex;
     flex-direction: column;
 
     > .tab-pane {
-        height: 100%;
-        flex: auto 1;
+        flex: 1 1 auto;
         padding-top: 2em;
 
         &[aria-hidden='false'] {
             display: flex;
             flex-direction: column;
         }
-
-        .results-table {
-            flex-grow: 1;
-            flex-basis: 150px;
-            min-height: 150px;
-        }
     }
 }