From 3286a9c4bc06a38b89d82e9abdaf260dfb4a35cf Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 20 May 2021 11:43:12 -0400
Subject: [PATCH] Query Results: Render errors table on fullscreen (#807)

* Render errors table on fullscreen
---
 .../QueryResultsTable/QueryResultsTable.jsx   | 32 ++++++++-----------
 .../queries/QueryResultsTable/_styles.scss    | 14 +++++---
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx b/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx
index f2fb249e26..b44859fed6 100644
--- a/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx
+++ b/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx
@@ -227,25 +227,21 @@ class QueryResultsTable extends Component {
           {!hasNoResults && renderTable()}
         </div>
         {hasErrors && (
-          <>
-            <div className={`${baseClass}__error-table-container`}>
-              <header className={`${baseClass}__button-wrap`}>
-                <div>
-                  <Button
-                    className={`${baseClass}__export-btn`}
-                    onClick={onExportErrorsResults}
-                    variant="inverse"
-                  >
-                    Export errors
-                  </Button>
-                </div>
-              </header>
-              <span className={`${baseClass}__table-title`}>Errors</span>
-              <div className={`${baseClass}__error-table-wrapper`}>
-                {renderErrorsTable()}
-              </div>
+          <div className={`${baseClass}__error-table-container`}>
+            <header className={`${baseClass}__button-wrap`}>
+              <Button
+                className={`${baseClass}__export-btn`}
+                onClick={onExportErrorsResults}
+                variant="inverse"
+              >
+                Export errors
+              </Button>
+            </header>
+            <span className={`${baseClass}__table-title`}>Errors</span>
+            <div className={`${baseClass}__error-table-wrapper`}>
+              {renderErrorsTable()}
             </div>
-          </>
+          </div>
         )}
       </div>
     );
diff --git a/frontend/components/queries/QueryResultsTable/_styles.scss b/frontend/components/queries/QueryResultsTable/_styles.scss
index e275571f76..ee851060ad 100644
--- a/frontend/components/queries/QueryResultsTable/_styles.scss
+++ b/frontend/components/queries/QueryResultsTable/_styles.scss
@@ -39,7 +39,7 @@
     border-radius: 3px;
     overflow: scroll;
     margin-top: $pad-xsmall;
-    min-height: 200px;
+    min-height: 100px;
     max-height: 400px;
     width: 100%;
 
@@ -57,17 +57,19 @@
 
   &__error-table-container {
     margin-top: $pad-large;
+    overflow: scroll;
   }
 
   &__error-table-wrapper {
     display: flex;
     border: solid 1px $ui-fleet-blue-15;
     border-radius: 3px;
-    overflow: scroll;
     margin-bottom: $pad-xxlarge;
     margin-top: $pad-xsmall;
-    max-height: 200px;
+    min-height: 200px;
+    max-height: 400px;
     width: 100%;
+    box-sizing: border-box;
   }
 
   &__table {
@@ -144,7 +146,11 @@
     }
 
     .query-results-table__error-table-container {
-      display: none;
+      max-height: none;
+    }
+
+    .query-results-table__error-table-wrapper {
+      max-height: none;
     }
   }