From 2bbad2f05ad7a53bebaea3341ab904dd7aadb1b5 Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Mon, 9 Jan 2017 17:13:52 -0600
Subject: [PATCH] Getting New Query back in order (#830)

---
 .../forms/queries/QueryForm/QueryForm.jsx     |  2 +-
 .../queries/QueryResultsTable/_styles.scss    | 18 ++++++++-
 .../SecondarySidePanelContainer/_styles.scss  |  2 +-
 frontend/layouts/CoreLayout/_styles.scss      |  5 +--
 .../pages/queries/QueryPage/QueryPage.jsx     | 40 +++++++++++--------
 frontend/pages/queries/QueryPage/_styles.scss |  7 ++++
 frontend/styles/global/_global.scss           |  2 +
 frontend/styles/var/_global.scss              |  3 ++
 8 files changed, 56 insertions(+), 23 deletions(-)
 create mode 100644 frontend/pages/queries/QueryPage/_styles.scss

diff --git a/frontend/components/forms/queries/QueryForm/QueryForm.jsx b/frontend/components/forms/queries/QueryForm/QueryForm.jsx
index 3cf88b9376..f40f522908 100644
--- a/frontend/components/forms/queries/QueryForm/QueryForm.jsx
+++ b/frontend/components/forms/queries/QueryForm/QueryForm.jsx
@@ -267,7 +267,7 @@ class QueryForm extends Component {
     const { onLoad, renderPlatformDropdown, renderButtons, renderTargetsInput } = this;
 
     return (
-      <form className={`${baseClass}__wrapper body-wrap`} onSubmit={handleSubmit}>
+      <form className={`${baseClass}__wrapper`} onSubmit={handleSubmit}>
         <h1>{queryType === 'label' ? 'New Label Query' : 'New Query'}</h1>
         <KolideAce
           {...fields.query}
diff --git a/frontend/components/queries/QueryResultsTable/_styles.scss b/frontend/components/queries/QueryResultsTable/_styles.scss
index 3e42ac214d..b2607703a5 100644
--- a/frontend/components/queries/QueryResultsTable/_styles.scss
+++ b/frontend/components/queries/QueryResultsTable/_styles.scss
@@ -18,7 +18,6 @@
     border: solid 1px $accent-dark;
     border-radius: 3px;
     box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.12);
-    max-height: 550px;
     overflow: scroll;
   }
 
@@ -27,6 +26,7 @@
     color: $text-medium;
     font-size: $small;
     width: 100%;
+    table-layout: fixed;
   }
 
   thead {
@@ -36,14 +36,30 @@
 
     th {
       padding: $pad-small $pad-xsmall;
+      width: 125px;
+    }
+
+    .input-field {
+      width: 100%;
     }
   }
 
   tbody {
     background-color: $white;
+    height: 550px;
+    min-width: 100%;
+    overflow: auto;
+    display: inline-block;
 
     td {
       padding: $pad-xsmall;
+      min-width: 125px;
+    }
+
+    tr {
+      &:nth-child(even) {
+        background-color: $bg-light;
+      }
     }
   }
 }
diff --git a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
index 3ae7e696f3..72de56b569 100644
--- a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
+++ b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
@@ -6,7 +6,7 @@
   box-shadow: -2px 0 8px 0 rgba($black, 0.1);
   box-sizing: border-box;
   overflow: scroll;
-  width: 320px;
+  width: $sidepanel-width;
   margin-top: $pad-base;
   margin-left: $pad-base;
   min-height: 100%;
diff --git a/frontend/layouts/CoreLayout/_styles.scss b/frontend/layouts/CoreLayout/_styles.scss
index 5909ae4a97..ec4ebe2970 100644
--- a/frontend/layouts/CoreLayout/_styles.scss
+++ b/frontend/layouts/CoreLayout/_styles.scss
@@ -20,11 +20,10 @@
   border-right: 1px solid $border-medium;
   box-shadow: 2px 0 8px 0 rgba($black, 0.1);
   box-sizing: border-box;
-  min-width: 240px;
+  width: $nav-width;
 
   @include breakpoint(smalldesk) {
     padding-left: 0;
-    min-width: 55px;
-    max-width: 55px;
+    width: $nav-tablet-width;
   }
 }
diff --git a/frontend/pages/queries/QueryPage/QueryPage.jsx b/frontend/pages/queries/QueryPage/QueryPage.jsx
index 663c993f8d..80cdbf3bdb 100644
--- a/frontend/pages/queries/QueryPage/QueryPage.jsx
+++ b/frontend/pages/queries/QueryPage/QueryPage.jsx
@@ -20,6 +20,8 @@ import { selectOsqueryTable, setSelectedTargets, setSelectedTargetsQuery } from
 import targetInterface from 'interfaces/target';
 import validateQuery from 'components/forms/validators/validate_query';
 
+const baseClass = 'query-page';
+
 class QueryPage extends Component {
   static propTypes = {
     campaign: campaignInterface,
@@ -218,23 +220,27 @@ class QueryPage extends Component {
     } = this.props;
 
     return (
-      <div className="has-sidebar">
-        <QueryForm
-          formData={query}
-          handleSubmit={onSaveQueryFormSubmit}
-          onFetchTargets={onFetchTargets}
-          onOsqueryTableSelect={onOsqueryTableSelect}
-          onRunQuery={onRunQuery}
-          onStopQuery={onStopQuery}
-          onTargetSelect={onTargetSelect}
-          onUpdate={onUpdateQuery}
-          queryIsRunning={queryIsRunning}
-          selectedTargets={selectedTargets}
-          serverErrors={errors}
-          targetsCount={targetsCount}
-          selectedOsqueryTable={selectedOsqueryTable}
-        />
-        {campaign && <QueryResultsTable campaign={campaign} />}
+      <div className={`${baseClass} has-sidebar`}>
+        <div className={`${baseClass}__content`}>
+          <div className={`${baseClass}__form body-wrap`}>
+            <QueryForm
+              formData={query}
+              handleSubmit={onSaveQueryFormSubmit}
+              onFetchTargets={onFetchTargets}
+              onOsqueryTableSelect={onOsqueryTableSelect}
+              onRunQuery={onRunQuery}
+              onStopQuery={onStopQuery}
+              onTargetSelect={onTargetSelect}
+              onUpdate={onUpdateQuery}
+              queryIsRunning={queryIsRunning}
+              selectedTargets={selectedTargets}
+              serverErrors={errors}
+              targetsCount={targetsCount}
+              selectedOsqueryTable={selectedOsqueryTable}
+            />
+          </div>
+          {campaign && <div className={`${baseClass}__results body-wrap`}><QueryResultsTable campaign={campaign} /></div>}
+        </div>
         <QuerySidePanel
           onOsqueryTableSelect={onOsqueryTableSelect}
           onTextEditorInputChange={onTextEditorInputChange}
diff --git a/frontend/pages/queries/QueryPage/_styles.scss b/frontend/pages/queries/QueryPage/_styles.scss
new file mode 100644
index 0000000000..50b4dbce18
--- /dev/null
+++ b/frontend/pages/queries/QueryPage/_styles.scss
@@ -0,0 +1,7 @@
+.query-page {
+  &__content {
+    @include display(flex);
+    @include flex-direction(column);
+    margin-bottom: $pad-base;
+  }
+}
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index d5f02b40bd..faaf2a357c 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -54,12 +54,14 @@ a {
   box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
   border: solid 1px $silver;
   min-width: 610px;
+  max-width: calc(100vw - #{$nav-width} - #{$pad-base});
   box-sizing: border-box;
   margin-top: $pad-base;
   margin-right: $pad-base;
 
   @at-root .has-sidebar & {
     margin-right: 0;
+    max-width: calc(100vw - #{$nav-width} - #{$pad-base} - #{$pad-base} - #{$sidepanel-width});
   }
 }
 
diff --git a/frontend/styles/var/_global.scss b/frontend/styles/var/_global.scss
index fcbf67a1e8..1bd81b000f 100644
--- a/frontend/styles/var/_global.scss
+++ b/frontend/styles/var/_global.scss
@@ -1,3 +1,6 @@
 $border-radius: 4px;
 $footer-height: 70px;
+$nav-width: 240px;
+$nav-tablet-width: 55px;
 $base-font-size: 16;
+$sidepanel-width: 320px;