Getting New Query back in order (#830)

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}

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;
+      }
     }
   }
 }

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%;

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;
   }
 }

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}

frontend/pages/queries/QueryPage/_styles.scss

@@ -0,0 +1,7 @@
+.query-page {
+  &__content {
+    @include display(flex);
+    @include flex-direction(column);
+    margin-bottom: $pad-base;
+  }
+}

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});
   }
 }
 

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;