From 8107804b1f01ea1b095bfa25f0fa502218812ca5 Mon Sep 17 00:00:00 2001
From: Daniel Campbell <metalwhirlwind@gmail.com>
Date: Wed, 8 Aug 2018 17:31:36 -0700
Subject: [PATCH] Style dropdown to be width of input fields

---
 .../sources/components/KapacitorDropdown.tsx  |  9 +++++--
 ui/src/sources/components/KapacitorStep.scss  | 11 +++++++++
 ui/src/sources/components/KapacitorStep.tsx   | 24 ++++++++++---------
 ui/src/style/chronograf.scss                  |  1 +
 4 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 ui/src/sources/components/KapacitorStep.scss

diff --git a/ui/src/sources/components/KapacitorDropdown.tsx b/ui/src/sources/components/KapacitorDropdown.tsx
index 2271413c1..d18da60c4 100644
--- a/ui/src/sources/components/KapacitorDropdown.tsx
+++ b/ui/src/sources/components/KapacitorDropdown.tsx
@@ -7,6 +7,8 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 import Button from 'src/reusable_ui/components/Button'
 import {ToggleVisibility} from 'src/types/wizard'
 
+import classnames from 'classnames'
+
 import {
   ComponentColor,
   ComponentSize,
@@ -39,7 +41,7 @@ class KapacitorDropdown extends PureComponent<Props & WithRouterProps> {
   }
 
   public render() {
-    const {buttonSize} = this.props
+    const {buttonSize, setActiveKapacitor, onAddNew} = this.props
 
     if (this.isKapacitorsEmpty) {
       return (
@@ -62,7 +64,10 @@ class KapacitorDropdown extends PureComponent<Props & WithRouterProps> {
         replaceWithIfNotAuthorized={this.UnauthorizedDropdown}
       >
         <Dropdown
-          className="dropdown-260"
+          className={classnames({
+            'kapacitor-dropdown': onAddNew,
+            'dropdown-260': !onAddNew,
+          })}
           buttonColor="btn-primary"
           buttonSize={buttonSize}
           items={this.kapacitorItems}
diff --git a/ui/src/sources/components/KapacitorStep.scss b/ui/src/sources/components/KapacitorStep.scss
new file mode 100644
index 000000000..be31d4f65
--- /dev/null
+++ b/ui/src/sources/components/KapacitorStep.scss
@@ -0,0 +1,11 @@
+.kapacitor-step--dropdown {
+  padding: 0;
+}
+
+.kapacitor-dropdown {
+  min-width: 100%;
+  .dropdown,
+  .dropdown-toggle {
+    min-width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/ui/src/sources/components/KapacitorStep.tsx b/ui/src/sources/components/KapacitorStep.tsx
index c43e8db2d..dad87381c 100644
--- a/ui/src/sources/components/KapacitorStep.tsx
+++ b/ui/src/sources/components/KapacitorStep.tsx
@@ -193,17 +193,19 @@ class KapacitorStep extends PureComponent<Props, State> {
       const storeSource = sources.filter(s => s.id === source.id)[0]
 
       return (
-        <div className="form-group col-xs-12 wizard-input">
-          <KapacitorDropdown
-            suppressEdit={true}
-            source={storeSource}
-            kapacitors={storeSource.kapacitors}
-            deleteKapacitor={deleteKapacitor}
-            setActiveKapacitor={this.handleSetActiveKapacitor}
-            buttonSize="btn-sm"
-            onAddNew={this.resetDefault}
-            displayValue={!exists && newKapacitor.name}
-          />
+        <div className="kapacitor-step--dropdown col-xs-12">
+          <div className="form-group col-xs-6">
+            <KapacitorDropdown
+              suppressEdit={true}
+              source={storeSource}
+              kapacitors={storeSource.kapacitors}
+              deleteKapacitor={deleteKapacitor}
+              setActiveKapacitor={this.handleSetActiveKapacitor}
+              buttonSize="btn-sm"
+              onAddNew={this.resetDefault}
+              displayValue={!exists && newKapacitor.name}
+            />
+          </div>
         </div>
       )
     }
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 54f6649cf..eaa107e70 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -76,6 +76,7 @@
 @import 'components/histogram-chart';
 @import 'components/import-dashboard-mappings';
 @import 'src/sources/components/ConnectionLink';
+@import 'src/sources/components/KapacitorStep';
 
 
 // Reusable UI Components