Style dropdown to be width of input fields

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}

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

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">
+        <div className="kapacitor-step--dropdown col-xs-12">
-          <KapacitorDropdown
+          <div className="form-group col-xs-6">
-            suppressEdit={true}
+            <KapacitorDropdown
-            source={storeSource}
+              suppressEdit={true}
-            kapacitors={storeSource.kapacitors}
+              source={storeSource}
-            deleteKapacitor={deleteKapacitor}
+              kapacitors={storeSource.kapacitors}
-            setActiveKapacitor={this.handleSetActiveKapacitor}
+              deleteKapacitor={deleteKapacitor}
-            buttonSize="btn-sm"
+              setActiveKapacitor={this.handleSetActiveKapacitor}
-            onAddNew={this.resetDefault}
+              buttonSize="btn-sm"
-            displayValue={!exists && newKapacitor.name}
+              onAddNew={this.resetDefault}
-          />
+              displayValue={!exists && newKapacitor.name}
+            />
+          </div>
         </div>
       )
     }

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