From f3f6ff401007d64e00b4795c675dbc09817b8def Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Tue, 10 Jan 2017 13:20:36 -0600
Subject: [PATCH] Fixing some styling issues on New Label Query (#849)

* Fixing some styling issues on New Label Query

* Fix lint error:
---
 .../forms/queries/QueryForm/QueryForm.jsx     | 15 ++++++++------
 .../forms/queries/QueryForm/_styles.scss      |  3 ++-
 .../hosts/ManageHostsPage/ManageHostsPage.jsx | 20 ++++++++++---------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/components/forms/queries/QueryForm/QueryForm.jsx b/frontend/components/forms/queries/QueryForm/QueryForm.jsx
index f40f522908..7ab45d66e7 100644
--- a/frontend/components/forms/queries/QueryForm/QueryForm.jsx
+++ b/frontend/components/forms/queries/QueryForm/QueryForm.jsx
@@ -184,14 +184,14 @@ class QueryForm extends Component {
       return (
         <div className={`${baseClass}__button-wrap`}>
           <Button
-            className={`${baseClass}__save-changes-btn`}
+            className={`${baseClass}__cancel-btn`}
             onClick={onCancel}
             variant="inverse"
           >
             Cancel
           </Button>
           <Button
-            className={`${baseClass}__save-as-new-btn`}
+            className={`${baseClass}__save-btn`}
             disabled={!canSaveAsNew(fields, formData)}
             type="submit"
             variant="brand"
@@ -227,10 +227,13 @@ class QueryForm extends Component {
     const { platformOptions } = helpers;
 
     return (
-      <Dropdown
-        {...fields.platform}
-        options={platformOptions}
-      />
+      <div className="form-field form-field--dropdown">
+        <label className="form-field__label" htmlFor="platform">Platform</label>
+        <Dropdown
+          {...fields.platform}
+          options={platformOptions}
+        />
+      </div>
     );
   }
 
diff --git a/frontend/components/forms/queries/QueryForm/_styles.scss b/frontend/components/forms/queries/QueryForm/_styles.scss
index c166051c6b..db573369e4 100644
--- a/frontend/components/forms/queries/QueryForm/_styles.scss
+++ b/frontend/components/forms/queries/QueryForm/_styles.scss
@@ -22,7 +22,8 @@
     text-align: right;
   }
 
-  &__save-query-btn {
+  &__save-query-btn,
+  &__cancel-btn {
     margin-right: $xsmall;
   }
 
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
index ae8a6cf5da..583cf3ea62 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
@@ -233,15 +233,17 @@ export class ManageHostsPage extends Component {
 
     if (isAddLabel) {
       return (
-        <QueryForm
-          key="query-composer"
-          onCancel={onCancelAddLabel}
-          onOsqueryTableSelect={onOsqueryTableSelect}
-          handleSubmit={onSaveAddLabel}
-          queryType="label"
-          query={queryStub}
-          serverErrors={labelErrors}
-        />
+        <div className="body-wrap">
+          <QueryForm
+            key="query-composer"
+            onCancel={onCancelAddLabel}
+            onOsqueryTableSelect={onOsqueryTableSelect}
+            handleSubmit={onSaveAddLabel}
+            queryType="label"
+            query={queryStub}
+            serverErrors={labelErrors}
+          />
+        </div>
       );
     }